/* ==========================================================
   SDTD WORKSPACE

   Smart Digital Technical Documentation

==========================================================*/

/* ==========================================================
   ROOT
==========================================================*/

:root{

    --primary:#005A9C;

    --accent:#F28C28;

    --background:#F5F7FA;

    --surface:#FFFFFF;

    --border:#E5E7EB;

    --text:#222;

    --text-light:#6B7280;

    --shadow:0 2px 10px rgba(0,0,0,.08);

    --radius:8px;

}


/* ==========================================================
   RESET
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html,
body{

    width:100%;

    height:100%;

    overflow:hidden;

}

body{

    font-family:

        "Inter",

        "Segoe UI",

        Arial,

        sans-serif;

    background:var(--background);

    color:var(--text);

}


/* ==========================================================
   MAIN
==========================================================*/

#sdtd-workspace{

    width:100vw;

    height:100vh;

}


/* ==========================================================
   WORKSPACE LAYOUT
==========================================================*/

#workspace-main{

    width:100%;

    height:100%;

    display:flex;

}


/* ==========================================================
   LEFT SIDE
==========================================================*/

#workspace-area{

    width:75%;

    height:100%;

    display:flex;

    flex-direction:column;

}


/* ==========================================================
   HEADER
==========================================================*/

#workspace-header{

    height:80px;

    background:white;

    border-bottom:1px solid var(--border);

    box-shadow:var(--shadow);

    padding:18px 24px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


#project-title{

    font-size:24px;

    font-weight:700;

    color:#243B5A;

}


#project-meta{

    margin-top:6px;

}


#project-code{

    color:var(--text-light);

    font-size:16px;

}


/* ==========================================================
   VIEWER
==========================================================*/

#workspace-view{

    flex:1;

    padding:15px;

    overflow:hidden;

    position:relative;

}


#viewer-container{

    width:100%;

    height:100%;

    background:white;

    border-radius:var(--radius);

    border:1px solid var(--border);

    position:relative;

    box-shadow:var(--shadow);

    overflow:hidden;

}


#viewer-3d-container{

    width:100%;

    height:100%;

    background:white;

    border-radius:var(--radius);

    border:1px solid var(--border);

    position:relative;

    box-shadow:var(--shadow);

    overflow:hidden;

}


.model-dimensions{

    position:absolute;

    bottom:8px;

    left:8px;

    font-size:11px;

    color:var(--text-light);

    background:rgba(255,255,255,.85);

    padding:2px 6px;

    border-radius:4px;

    pointer-events:none;

}


.view-toggle-btn{

    position:absolute;

    top:10px;

    right:10px;

    z-index:100;

    padding:6px 14px;

    cursor:pointer;

    border:1px solid var(--primary);

    border-radius:var(--radius);

    background:var(--primary);

    color:#fff;

    font-size:13px;

    font-weight:600;

    box-shadow:var(--shadow);

}


.viewer-toggle-btn{

    position:absolute;

    bottom:10px;

    left:10px;

    z-index:100;

    padding:6px 14px;

    cursor:pointer;

    border:1px solid var(--border);

    border-radius:var(--radius);

    background:var(--surface);

    color:var(--text);

    font-size:13px;

    font-weight:600;

    box-shadow:var(--shadow);

}

.home-view-btn {
    position: absolute;
    top: 56px;
    right: 10px;
    z-index: 100;
    width: 36px;
    height: 36px;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
}

.home-view-btn:hover {
    background: var(--border);
}

/* ==========================================================
   PANEL
==========================================================*/

#workspace-panel{

    width:25%;

    height:100%;

    background:white;

    border-left:1px solid var(--border);

    display:flex;

    flex-direction:column;

    overflow-y:hidden;

    padding:14px;

    gap:10px;

}


/* ==========================================================
   PANEL SECTIONS
==========================================================*/

.panel-section{

    background:white;

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:12px 14px;

    display:flex;

    flex-direction:column;

    min-height:0;

}


.panel-section h2{

    font-size:16px;

    color:var(--primary);

    margin-bottom:8px;

    flex-shrink:0;

}


/* ==========================================================
   CLIENT
==========================================================*/

#client-section{

    flex:0 0 auto;

    text-align:center;

    padding:20px 14px;

}


#client-logo{

    max-width:170px;

    margin:auto;

    display:block;

}


#client-name{

    margin-top:14px;

    font-size:26px;

    font-weight:700;

    color:#243B5A;

}


/* ==========================================================
   COMPONENT
   Compacto — solo el nombre y código de la pieza (2 líneas)
==========================================================*/

#component-section{

    flex:0 0 auto;

}


/* ==========================================================
   INFORMATION
   Crece más que las demás, por si hace falta más espacio
==========================================================*/

#information-section{

    flex:2;

    overflow-y:auto;

}


/* ==========================================================
   DOCUMENTS
   Alto fijo (~3 líneas visibles), con scroll propio si hay
   más documentos de los que caben
==========================================================*/

#documents-section{

    flex:0 0 auto;

    height:130px;

}

#documents-content{

    flex:1;

    overflow-y:auto;

    min-height:0;

}


/* ==========================================================
   ACTIONS
   Tamaño natural exacto — nunca debe recortarse ni hacer scroll
==========================================================*/

#actions-section{

    flex:0 0 auto;

}


/* ==========================================================
   BOM
==========================================================*/

#bom-container{

    height:220px;

    margin:0 15px 15px 15px;

    background:white;

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    display:flex;

    flex-direction:column;

}


#bom-header{

    height:46px;

    display:flex;

    align-items:center;

    padding:0 20px;

    font-weight:600;

    border-bottom:1px solid var(--border);

    background:#F7F9FB;

    user-select:none;

    cursor:pointer;

}


#bom-content{

    flex:1;

    overflow-y:auto;

}


/* ==========================================================
   TABLES
==========================================================*/

table{

    width:100%;

    border-collapse:collapse;

}


thead{

    background:#EEF3F8;

}


/* Encabezado de columnas del BOM fijo mientras se hace scroll */
#bom-table thead th{

    position:sticky;

    top:0;

    z-index:1;

    background:#EEF3F8;

}


th{

    text-align:left;

    padding:6px 8px;

    font-size:12.5px;

    border-bottom:1px solid var(--border);

}


td{

    padding:5px 8px;

    font-size:12.5px;

    border-bottom:1px solid #ECECEC;

}


.bom-checkbox-col{

    width:56px;

    text-align:center;

    padding:5px 4px !important;

}

.bom-quote-checkbox{

    cursor:pointer;

}

.bom-select-all-label{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    cursor:pointer;

}


tbody tr{

    transition:.2s;

    cursor:pointer;

}


tbody tr:hover{

    background:#EEF5FC;

}


/* ==========================================================
   SVG
==========================================================*/

object{

    width:100%;

    height:100%;

    border:none;

}


/* ==========================================================
   SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#C5CBD3;

    border-radius:6px;

}

::-webkit-scrollbar-thumb:hover{

    background:#9FA6AF;

}

/* ==========================================================
   BOM SELECTION
========================================================== */

.bom-selected{

    background:var(--bom-highlight-color, var(--primary)) !important;

    font-weight:700;

    transition:.2s;

}

.bom-selected td{

    color:#000;

}

/* ==========================================================
   ACTIONS — Solicitud de cotización
========================================================== */

.action-button{

    width:100%;

    padding:12px;

    background:var(--primary);

    color:white;

    border:none;

    border-radius:var(--radius);

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

.action-button:hover:not(:disabled){

    opacity:.9;

}

.action-button:disabled{

    background:#C7CDD4;

    cursor:not-allowed;

}

.action-button-primary{

    background:var(--accent);

}

.action-divider{

    height:1px;

    background:var(--border);

    margin:16px 0;

}

.panel-hint{

    margin-top:10px;

    font-size:12.5px;

    color:var(--text-light);

    line-height:1.4;

}


/* ==========================================================
   MODAL — Quote Request
========================================================== */

.modal-overlay{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.5);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:9999;

}

.modal-content{

    background:var(--surface);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:24px;

    max-width:500px;

    width:90%;

    max-height:90vh;

    overflow-y:auto;

    position:relative;

}

.modal-close{

    position:absolute;

    top:12px;

    right:16px;

    background:none;

    border:none;

    font-size:24px;

    cursor:pointer;

    color:var(--text-light);

    line-height:1;

}

.modal-close:hover{

    color:var(--text);

}

.modal-readonly{

    background:var(--background);

    padding:12px;

    border-radius:var(--radius);

    margin-bottom:16px;

    font-size:13px;

}

.modal-readonly ul{

    margin-top:8px;

    padding-left:18px;

}

.modal-readonly li{

    margin-bottom:4px;

    font-size:12.5px;

}

#quote-modal-form label{

    display:block;

    margin-top:12px;

    font-size:13px;

    font-weight:600;

    color:var(--text);

}

#quote-modal-form input,
#quote-modal-form textarea{

    width:100%;

    padding:8px 10px;

    border:1px solid var(--border);

    border-radius:var(--radius);

    font-size:13px;

    font-family:inherit;

    margin-top:4px;

}

#quote-modal-form input:focus,
#quote-modal-form textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 2px rgba(0,90,156,.15);

}

.modal-actions{

    margin-top:16px;

}

#quote-modal-status.success{

    color:#16a34a;

}

#quote-modal-status.error{

    color:#dc2626;

}