:root {
  --login-bg:      #0a0c12;
  --login-surface: #111420;
  --login-border:  rgba(255, 255, 255, 0.07);
  --login-accent:  #4f8eff;
  --login-accent2: #7b5fff;
  --login-text:    #e8eaf0;
  --login-muted:   #6b7280;
  --login-error:   #ff5f6d;
  --text-tabla:    #141414;
  
  --color-Fila-Estado-Final:  #FAE1E1;
}


.contenedor-estado-tabla {
    display: flex;
    gap: 20px; /* Espacio entre elementos */
    margin-bottom: 10px;
    margin-top: 10px;
}

.color-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
}


.estado-Pendiente { background-color: rgb(247, 90, 65); } /* Color para estado 1 */
.estado-Proceso { background-color: rgb(250, 231, 1 ); } /* Color para estado 2 */
.estado-Seguimiento { background-color: rgb(70, 151, 191); } /* Color para estado 3 */
.estado-ValidaciionFinal { background-color: var(--color-Fila-Estado-Final) }


/*LOGIN*/



/* --- Contenedor raíz --- */
.login-page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--login-bg);
  font-family: 'DM Sans', sans-serif;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
  text-align: left;
  z-index: 9999;
}

/* --- Fondo: grid de líneas --- */
.login-page .bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  z-index: 0;
  pointer-events: none;
}

/* --- Fondo: orbes animados --- */
.login-page .bg-mesh {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.login-page .bg-mesh::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 142, 255, 0.12) 0%, transparent 70%);
  top: -150px;
  left: -150px;
  animation: loginDrift1 12s ease-in-out infinite alternate;
}
.login-page .bg-mesh::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 95, 255, 0.1) 0%, transparent 70%);
  bottom: -100px;
  right: -100px;
  animation: loginDrift2 15s ease-in-out infinite alternate;
}
@keyframes loginDrift1 { to { transform: translate(60px, 80px); } }
@keyframes loginDrift2 { to { transform: translate(-60px, -80px); } }

/* --- Tarjeta principal --- */
.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: var(--login-surface);
  border: 1px solid var(--login-border);
  border-radius: 20px;
  padding: 44px 40px 40px;
  box-shadow:
    0 0 0 1px rgba(79, 142, 255, 0.06),
    0 40px 80px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: loginSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 40px;
  right: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--login-accent), var(--login-accent2));
  border-radius: 0 0 8px 8px;
}
@keyframes loginSlideUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Logo row --- */
.login-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.login-logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--login-accent), var(--login-accent2));
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.login-logo-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.login-logo-text {
  line-height: 1;
}
.login-brand {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--login-text);
  letter-spacing: 0.02em;
}
.login-brand-sub {
  font-size: 11px;
  color: var(--login-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* --- Títulos --- */
.login-title {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--login-text);
  margin-bottom: 6px;
}
.login-subtitle {
  font-size: 13px;
  color: var(--login-muted);
  margin-bottom: 28px;
}

/* --- Campos --- */
.login-field {
  margin-bottom: 16px;
}
.login-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--login-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.login-input-wrap {
  position: relative;
}
.login-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: var(--login-muted);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s;
  pointer-events: none;
}
.login-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--login-border);
  border-radius: 10px;
  color: var(--login-text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  padding: 12px 14px 12px 40px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-sizing: border-box;
}
.login-input::placeholder {
  color: rgba(107, 114, 128, 0.7);
}
.login-input:focus {
  border-color: var(--login-accent);
  background: rgba(79, 142, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(79, 142, 255, 0.12);
}
.login-input-wrap:focus-within .login-input-icon {
  stroke: var(--login-accent);
}

/* --- Botón --- */
.login-btn {
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--login-accent), var(--login-accent2));
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(79, 142, 255, 0.3);
  box-sizing: border-box;
}
.login-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
.login-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(79, 142, 255, 0.4);
}
.login-btn:hover::after { opacity: 1; }
.login-btn:active       { transform: translateY(0); }
.login-btn.loading      { pointer-events: none; opacity: 0.7; }

/* --- Mensaje de error --- */
.login-resultado {
  font-size: 13px;
  font-weight: 500;
  min-height: 20px;
  margin-bottom: 12px;
  color: var(--login-error);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: loginFadeIn 0.3s ease;
}
.login-resultado:empty { display: none; }
@keyframes loginFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Pie de tarjeta --- */
.login-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 11px;
  color: rgba(107, 114, 128, 0.5);
  letter-spacing: 0.04em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
  .login-card {
    padding: 32px 24px 28px;
    border-radius: 16px;
  }
  .login-card::before {
    left: 24px;
    right: 24px;
  }
  .login-title  { font-size: 20px; }
  .login-brand  { font-size: 15px; }
  .login-input  {
    font-size: 16px;
    padding: 13px 14px 13px 40px;
  }
  .login-btn {
    padding: 14px;
    font-size: 15px;
  }
}

@media (max-width: 360px) {
  .login-card         { padding: 28px 18px 24px; }
  .login-card::before { left: 18px; right: 18px; }
}


/* ============================================================
   FIN LOGIN
   ============================================================ */

body {
  flex-wrap: wrap;
  font-family: sans-serif;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  margin: 0;
  padding: 0;
  
}

/* ============================================================
   DISEÑO FORMULARIO
   ============================================================ */

.form-box {
    max-width: 720px;
    margin: 0 auto;
    background: var(--container-color);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem 2rem 1.5rem;
    box-shadow: var(--shadow);
    transition: background-color var(--transition-smooth), border-color var(--transition-smooth);
}

.form-title {
    font-family: var(--title-font);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--title-color);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--first-color-light);
    position: relative;
}

.form-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 2.5rem;
    height: 2px;
    background: var(--first-color);
    border-radius: 2px;
}

/* ===== LABEL ===== */
.form-box label {
    display: block;
    font-size: var(--small-font-size);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: .35rem;
    margin-top: 1rem;
    letter-spacing: .02em;
}

.form-box label:first-child { margin-top: 0; }

/* ===== INPUTS GENERALES ===== */
.form-box input[type="text"],
.form-box input[type="password"],
.form-box input[type="time"],
.form-box input[type="email"],
.form-box input[type="date"],
.form-box input[type="number"],
.form-box input[type="datetime-local"],
.form-box select {
    display: block;
    width: 100%;
    margin: 0 0 .25rem 0;
    padding: .65rem .9rem;
    font-family: var(--body-font);
    font-size: var(--small-font-size);
    color: var(--text-color);
    background-color: var(--body-color);
    border: 1.5px solid var(--border-color);
    border-radius: .6rem;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-smooth);
    text-align: center;
}


.form-box textarea {
    display: block;
    width: 100%;
    margin: 0 0 .25rem 0;
    padding: .65rem .9rem;
    font-family: var(--body-font);
    font-size: var(--small-font-size);
    color: var(--text-color);
    background-color: var(--body-color);
    border: 1.5px solid var(--border-color);
    border-radius: .6rem;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-smooth);
    text-align: left;
}


/* Focus state */
.form-box input[type="text"]:focus,
.form-box input[type="password"]:focus,
.form-box input[type="time"]:focus,
.form-box input[type="email"]:focus,
.form-box input[type="date"]:focus,
.form-box input[type="number"]:focus,
.form-box input[type="datetime-local"]:focus,
.form-box select:focus,
.form-box textarea:focus {
    border-color: var(--first-color);
    box-shadow: 0 0 0 3px var(--first-color-glow);
    background-color: var(--container-color);
}

/* Placeholder */
.form-box input::placeholder,
.form-box textarea::placeholder {
    color: var(--text-color-light);
    font-size: var(--smaller-font-size);
}

/* Select flecha personalizada */
.form-box select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    padding-right: 2.2rem;
    cursor: pointer;
}

/* ===== TEXTAREA ===== */
.form-box textarea,
textarea {
    height: 150px;
    resize: vertical;
    font-family: var(--body-font);
    line-height: 1.6;
}

/* Scrollbar del textarea */
textarea::-webkit-scrollbar { width: 6px; }
textarea::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 999px;
}
textarea::-webkit-scrollbar-track { background: transparent; }
textarea {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

/* ===== BOTÓN SUBMIT PRINCIPAL ===== */
.form-box button[type="submit"] {
    display: block;
    width: 100%;
    margin: 1.5rem 0 .5rem;
    padding: .75rem 1.5rem;
    font-family: var(--body-font);
    font-size: var(--small-font-size);
    font-weight: 600;
    letter-spacing: .03em;
    color: #fff;
    background: linear-gradient(135deg, var(--first-color), var(--first-color-alt));
    border: none;
    border-radius: .65rem;
    cursor: pointer;
    outline: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 4px 14px var(--first-color-glow);
}

.form-box button[type="submit"]:hover {
    opacity: .9;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px var(--first-color-glow);
}

.form-box button[type="submit"]:active {
    transform: translateY(0);
    opacity: 1;
}

/* ===== BOTÓN TYPE=BUTTON (secundario) ===== */
.form-box input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .6rem 1.2rem;
    font-family: var(--body-font);
    font-size: var(--small-font-size);
    font-weight: 600;
    color: var(--first-color);
    background: var(--first-color-light);
    border: 1.5px solid var(--border-color);
    border-radius: .6rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    margin: .5rem .25rem;
}

.form-box input[type="button"]:hover {
    background: var(--first-color);
    color: #fff;
    border-color: var(--first-color);
}

.form-box input[type="button"]:active {
    transform: scale(.97);
}






/* ===== BOTÓN .boton (acción de alerta/peligro) ===== */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 2rem;
    font-family: var(--body-font);
    font-size: var(--small-font-size);
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #EF4444, #DC2626);
    border: none;
    border-radius: .65rem;
    cursor: pointer;
    outline: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
    margin: .5rem 0;
}

.boton:hover {
    opacity: .9;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35);
}

.boton:active {
    transform: translateY(0);
}

/* ===== CANVAS / FIRMA ===== */
canvas {
    display: block;
    width: 100%;
    height: 160px;
    background-color: var(--container-color);
    border: 1.5px solid var(--border-color);
    border-radius: .6rem;
    transition: border-color var(--transition-fast);
    cursor: crosshair;
}

canvas:hover {
    border-color: var(--first-color);
}

/* ===== RADIO & CHECKBOX ===== */
.rad {
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-color);
    cursor: pointer;
    margin-bottom: .5rem;
    justify-content: center;
}

.nivel {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
}

/* ===== INPUTS READONLY ===== */
.form-box input[readonly], .form-box textarea[readonly] {
    background-color: #f3f4f6; /* gris claro real en modo blanco */
    color: #6b7280; /* texto un poco más tenue */
    border: 1.5px solid #d1d5db;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .form-box {
        padding: 1.25rem 1rem 1rem;
        border-radius: .75rem;
    }

    .form-title {
        font-size: 1rem;
        text-align: center;
    }

    .form-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .form-box input[type="text"],
    .form-box input[type="password"],
    .form-box input[type="time"],
    .form-box input[type="email"],
    .form-box input[type="date"],
    .form-box input[type="number"],
    .form-box input[type="datetime-local"],
    .form-box select,
    .form-box textarea {
        font-size: .875rem;
        padding: .6rem .8rem;
    }

    canvas {
        height: 130px;
    }

    .boton {
        width: 100%;
        justify-content: center;
    }

    main {
        padding: 0 .75rem .75rem;
    }
}


/* ============================================================
   FIN DISEÑO FORMULARIO
   ============================================================ */



/* ============================================================
   DISEÑO TABLA GENERAL
   ============================================================ */
   
.tabla-base {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: var(--smaller-font-size);
}

/* ===============================
   HEADERS
=================================*/
.tabla-base thead th {
    font-weight: 600;
    color: var(--title-color);
    background: var(--first-color-light);
    border: 1px solid var(--border-color) !important;
    padding: .5rem .6rem;
    white-space: normal;
}



/* Hover */
.tabla-base tbody tr:hover td {
    box-shadow: inset 0 0 0 9999px rgba(209, 205, 205, 0.2);
    border-color: var(--border-color);
}


/* ===============================
   INPUTS FILTRO
=================================*/
.tabla-base thead input,
.tabla-base tfoot input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: .3rem .5rem;
    font-size: var(--smaller-font-size);
    border: 1px solid var(--border-color);
    border-radius: .35rem;
    background: var(--body-color);
    color: var(--text-color);
}

/* ===============================
   CELDAS
=================================*/
.tabla-base td {
    padding: .45rem .6rem;
    border: 1px solid var(--border-color) !important;
    color: var(--text-tabla);
    vertical-align: top; 

    white-space: normal; 
    word-break: break-word; 
    overflow-wrap: anywhere;

    transition: background-color var(--transition-fast);
}


/* ===============================
   INPUTS DE FILTRO
=================================*/
.tabla-base thead input,
.tabla-base tfoot input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: .3rem .5rem;
    font-size: var(--smaller-font-size);
    border: 1px solid var(--border-color);
    border-radius: .35rem;
    background: var(--body-color);
    color: var(--text-color);
    outline: none;
    font-family: var(--body-font);
    transition: border-color var(--transition-fast);
}

.tabla-base thead input:focus,
.tabla-base tfoot input:focus {
    border-color: var(--first-color);
}


.tabla-base tfoot {
    display: table-header-group !important;
}


.dt-centro-base {
    text-align: center !important;
    vertical-align: middle !important;
}

.btn-tabla-base {
    width: 32px;        /* tamaño fijo ancho */
    height: 32px;  
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}




.btn-tabla-base img {
    width: 25px;        /* tamaño fijo de la imagen */
    height: 25px;
    object-fit: contain;
}

.fila-validacion-final td {
    background-color: var(--color-Fila-Estado-Final);
    color: #000 !important;
}
            

@media (max-width: 768px) {

    .tabla-container-base {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


}

/* ===== CONTAINER AUXILIAR ===== */
.container2 {
    padding-top: 1rem;
}



/* ===== DARK MODE — overrides para elementos no cubiertos por variables ===== */
body.dark-mode .form-box select option {
    background: var(--container-color);
    color: var(--text-color);
}

body.dark-mode canvas {
    background-color: #fff;
}

body.dark-mode .mydatatable tbody tr:hover td {
    background-color:#E0E0E0;
}


/*SELECT**/

/* ===== SELECT2 ===== */

/* Contenedor principal */
.select2 + .select2-container .select2-selection--single {
  background-color: var(--container-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  height: 38px !important;
}

/* Texto seleccionado */
.select2 + .select2-container .select2-selection__rendered {
  color: var(--text-color) !important;
  line-height: 36px !important;
  padding-left: 12px !important;
}

/* Placeholder */
.select2 + .select2-container .select2-selection__placeholder {
  color: var(--text-color-light) !important;
}

/* Flecha */
.select2 + .select2-container .select2-selection__arrow {
  height: 36px !important;
}

.select2 + .select2-container .select2-selection__arrow b {
  border-color: var(--text-color-light) transparent transparent transparent !important;
}

/* Flecha cuando está abierto */
.select2-container--open .select2-selection__arrow b {
  border-color: transparent transparent var(--first-color) transparent !important;
}

/* Borde al enfocar */
.select2-container--focus .select2-selection--single {
  border-color: var(--first-color) !important;
  box-shadow: 0 0 0 3px var(--first-color-glow) !important;
  outline: none !important;
}

/* ===== DROPDOWN ===== */
.select2-dropdown {
  background-color: var(--container-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow) !important;
}

/* Buscador dentro del dropdown */
.select2-search--dropdown {
  padding: 8px !important;
  background-color: var(--container-color) !important;
}

.select2-search--dropdown .select2-search__field {
  background-color: var(--body-color) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  outline: none !important;
}

.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--first-color) !important;
}

/* ===== OPCIONES ===== */
.select2-results__options {
  background-color: var(--container-color) !important;
}

.select2-results__option {
  background-color: var(--container-color) !important;
  color: var(--text-color) !important;
  padding: 8px 12px !important;
  transition: background-color var(--transition-fast) !important;
}

/* Placeholder "Seleccione un técnico" */
.select2-results__option:first-child {
  color: var(--text-color-light) !important;
}



/* Opción ya seleccionada */
.select2-results__option[aria-selected="true"] {
  background-color: var(--first-color-light) !important;
  color: var(--first-color) !important;
  font-weight: var(--font-medium) !important;
}

.select2-dropdown {
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .select2-dropdown {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}


/* Hover */
.select2-results__option--highlighted {
  background-color: var(--first-color) !important;
  color: #fff !important;
}

/* Opción ya seleccionada */
.select2-results__option[aria-selected="true"] {
  background-color: var(--first-color-light) !important;
  color: var(--first-color) !important;
  font-weight: var(--font-medium) !important;
}

/* Hover sobre opción ya seleccionada */
.select2-results__option[aria-selected="true"].select2-results__option--highlighted {
  background-color: var(--first-color) !important;
  color: #fff !important;
}

/* =====================================================
   ESTILOS VISTA: tareaTecnico.php
   Reemplaza el bloque <style> inline de la página.
   Usa las variables CSS de nav-styles.css para dark mode.
   ===================================================== */

/* Contenedor principal */
.content {
    max-width: 98%;
    margin: auto;
    padding-bottom: 30px;
}

/* ===== BUSCADOR Y BOTONES SUPERIORES ===== */
.container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .75rem;
}

.container b {
    color: var(--text-color);
    font-size: var(--small-font-size);
}

#gfg {
    border: 1.5px solid var(--border-color) !important;
    background: var(--container-color) !important;
    color: var(--text-color) !important;
    border-radius: .6rem !important;
    padding: .45rem .75rem !important;
    font-family: var(--body-font) !important;
    font-size: var(--small-font-size) !important;
    width: 200px !important;
    outline: none !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

#gfg:focus {
    border-color: var(--first-color) !important;
    box-shadow: 0 0 0 3px var(--first-color-glow) !important;
}

#gfg::placeholder {
    color: var(--text-color-light) !important;
}

/* Botón tipo button genérico */
input[type="button"] {
    background: linear-gradient(135deg, var(--first-color), var(--first-color-alt));
    border: none;
    padding: .5rem 1rem;
    font-size: var(--small-font-size);
    font-family: var(--body-font);
    font-weight: 600;
    color: #fff;
    border-radius: .6rem;
    cursor: pointer;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

input[type="button"]:hover {
    opacity: .88;
    transform: translateY(-1px);
}

input[type="button"].boton_inicio_orden {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #fff;
}

input[type="submit"] {
    background: linear-gradient(135deg, #22C55E, #16A34A);
    border: none;
    padding: .5rem 1rem;
    font-size: var(--small-font-size);
    font-family: var(--body-font);
    font-weight: 600;
    color: #fff;
    border-radius: .6rem;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

input[type="submit"]:hover { opacity: .88; }

/* ===== LEYENDA ===== */
.leyenda {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: .5rem 0 .75rem;
    font-size: var(--small-font-size);
    color: var(--text-color);
}

.color-box {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: middle;
}

/* ===== TABLA ===== */
.tt-tabla {
    width: 100%;
    border: 1px solid var(--table-border);
    background: var(--container-color);
    border-spacing: 0;
    border-collapse: collapse;
    font-size: var(--small-font-size);
    line-height: 1.4;
    border-radius: .5rem;
    overflow: hidden;
}

.tt-tabla tr {
    border-bottom: 1px solid var(--table-border);
}

.tt-tabla th,
.tt-tabla td {
    padding: .4rem .65rem;
    text-align: left;
    color: var(--text-color);
}

.tt-tabla tr th {
    font-weight: 600;
}

/* Cabecera */
.tt-tabla thead tr {
    background: var(--table-th-bg, var(--first-color-light));
}

.tt-tabla thead tr th {
    color: var(--table-th-color, var(--title-color));
    font-size: var(--smaller-font-size);
    font-weight: 600;
    border-bottom: 2px solid var(--table-border);
    white-space: nowrap;
}

/* Filas body */
.tt-tabla tbody tr {
    transition: filter var(--transition-fast);
}

.tt-tabla tbody tr:hover { 
    filter: brightness(0.95);
}

body.dark-mode .tt-tabla tbody tr:hover {
    filter: brightness(1.08);
}

/* tfoot */
.tt-tabla tfoot td {
    border-top: 1px solid var(--table-border);
    color: var(--text-color-light);
    font-size: var(--smaller-font-size);
    padding: .4rem .65rem;
    background: var(--container-color);
}

/* ===== COLORES DE ESTADO ===== */
.estado-pendiente    { background-color: rgb(247, 90, 65);   color: #000 !important; }
.estado-en-proceso   { background-color: rgb(250, 231, 1);   color: #000 !important; }
.estado-seguimiento  { background-color: rgb(70, 151, 191);  color: #000 !important; }
.estado-orden        { background-color: rgb(68, 156, 54);   color: #000 !important; }
.estado-completada   { background-color: var(--container-color); }
.estado-orden-iniciar{ background-color: rgb(200, 255, 200); color: #000 !important; }

/* Las filas con estado siempre tienen texto negro */
.estado-pendiente *,
.estado-en-proceso *,
.estado-seguimiento *,
.estado-orden *,
.estado-orden-iniciar * {
    color: #000 !important;
}

/* ===== MODAL FOTO ===== */
#modalFoto > div {
    background: var(--container-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

#modalFoto h3 {
    color: var(--title-color);
    font-family: var(--title-font);
}

#modalFoto button {
    background: var(--first-color);
    color: #fff;
    border: none;
    padding: .5rem 1.2rem;
    border-radius: .5rem;
    cursor: pointer;
    font-family: var(--body-font);
    font-weight: 600;
    margin: .25rem;
    transition: opacity var(--transition-fast);
}

#modalFoto button:last-child {
    background: transparent;
    color: var(--text-color);
    border: 1.5px solid var(--border-color);
}

/* ===== DARK MODE overrides tabla ===== */
body.dark-mode .tt-tabla {
    border-color: var(--table-border);
}

body.dark-mode .tt-tabla thead tr {
    background: rgba(167, 139, 250, 0.08);
}

body.dark-mode .tt-tabla thead tr th {
    color: var(--title-color);
}

body.dark-mode .tt-tabla tfoot td {
    background: var(--container-color);
    border-color: var(--table-border);
}

/* ===== RESPONSIVE MÓVIL ===== */
@media only screen and (max-width: 480px) {

    .tt-tabla,
    .tt-tabla thead,
    .tt-tabla tfoot,
    .tt-tabla tbody,
    .tt-tabla tr {
        display: block;
    }

    .tt-tabla {
        position: relative;
        border-radius: .5rem;
    }

    .tt-tabla thead tr th {
        display: none;
    }

    .tt-tabla thead tr th:first-child {
        display: block;
        width: 100%;
        padding: 2% 5%;
        font-size: 1.1rem;
        text-align: center;
    }

    .tt-tabla tfoot {
        position: absolute;
        bottom: -50px;
        width: 100%;
    }

    .tt-tabla tfoot td,
    .tt-tabla tfoot tr {
        display: block;
        padding: 0;
        border: 0;
        text-align: center;
    }

    .tt-tabla tbody tr {
        position: relative;
    }

    .tt-tabla th,
    .tt-tabla td {
        padding: 8px 16px;
    }

    .tt-tabla tbody th,
    .tt-tabla tbody tr td:first-of-type {
        display: inline-block;
        width: 44%;
        padding: 1rem 4%;
        font-size: 1rem;
    }

    .tt-tabla tbody th {
        width: 34%;
    }

    .tt-tabla tbody tr td:first-of-type {
        padding-right: 8%;
    }

    .tt-tabla tr td,
    .tt-tabla tr td:nth-of-type(n+2) {
        display: block;
    }

    .tt-tabla tbody .closed td {
        display: none;
    }

    .tt-tabla tbody td:nth-of-type(n+2):before {
        content: attr(title) ": ";
        font-weight: bold;
        color: var(--text-color-light);
    }

    .tt-tabla tbody tr:after {
        content: "";
        position: absolute;
        right: 8px;
        top: 12px;
        width: 2rem;
        height: 2rem;
        opacity: 0.6;
        background: transparent url(../../img/menos.png) no-repeat center center;
        background-size: 2rem;
        cursor: pointer;
    }

    .tt-tabla tr.closed:after {
        background: transparent url(../../img/11.png) no-repeat center center;
        background-size: 2rem;
    }

    .tt-tabla td:nth-of-type(n+2) {
        border-bottom: 1px solid var(--table-border);
    }

    #gfg {
        width: 100% !important;
    }

    .tt-container {
        flex-direction: column;
        align-items: flex-start;
    }
}