/* =====================================================
   ENCICAR CONTROL
   MODULO DE APARIENCIA VISUAL
   VERSION 2.0

   ARCHIVO:
   css/apariencia-app.css

   CARACTERISTICAS:
   - Logo corporativo
   - Fondo limpio, sin marca de agua
   - Boton Copiar azul
   - Boton Reportar verde
   - Tarjetas modernas
   - Formularios mejorados
   - Tablas legibles
   - Diseño adaptable a celulares

   NO MODIFICA:
   - Supabase
   - Gestion de ordenes
   - Asistencia
   - Produccion
   - Reportes
   - Logica del aplicativo
   ===================================================== */


/* =====================================================
   1. COLORES CORPORATIVOS
   ===================================================== */

:root {

  /* Fondos */
  --ec-fondo: #eef2f7;
  --ec-blanco: #ffffff;

  /* Textos */
  --ec-texto: #10213c;
  --ec-texto-secundario: #64748b;

  /* Bordes */
  --ec-borde: #dbe3ef;

  /* Azul corporativo */
  --ec-azul: #2563eb;
  --ec-azul-hover: #1d4ed8;

  /* Verde de reportes */
  --ec-verde: #16a34a;
  --ec-verde-hover: #15803d;

  /* Estados */
  --ec-rojo: #dc2626;
  --ec-naranja: #f59e0b;

  /* Diseño */
  --ec-radio: 12px;

  --ec-sombra:
    0 3px 12px rgba(15, 23, 42, 0.06);

}


/* =====================================================
   2. FONDO GENERAL
   SIN IMAGEN NI MARCA DE AGUA
   ===================================================== */

body {

  background-color: var(--ec-fondo);

  background-image: none;

  font-family:
    "Segoe UI",
    Arial,
    sans-serif;

}


/* =====================================================
   3. FONDO PRINCIPAL DE LA APLICACION
   ===================================================== */

#app {

  background-color: var(--ec-fondo);

  background-image: none;

  color: var(--ec-texto);

}

#app main {

  background-color: var(--ec-fondo) !important;

  background-image: none !important;

  min-width: 0;

}


/* =====================================================
   4. LOGO CORPORATIVO EN EL ENCABEZADO
   ===================================================== */

#app > header > div:first-child {

  background-image:
    url("../assets/logo-encicar.png");

  background-repeat: no-repeat;

  background-position: left center;

  background-size: 48px 48px;

  padding-left: 62px;

  min-height: 50px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}


/* =====================================================
   5. LOGO EN LA PANTALLA DE INICIO DE SESION
   ===================================================== */

#login h2::before {

  content: "";

  display: block;

  width: 105px;

  height: 105px;

  margin: 0 auto 16px;

  background-image:
    url("../assets/logo-encicar.png");

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

}


/* =====================================================
   6. ESTILOS DE TITULOS
   ===================================================== */

#app .modulo h2 {

  color: var(--ec-texto);

  font-weight: 750;

  letter-spacing: -0.3px;

}

#app .modulo h3 {

  color: var(--ec-texto);

  font-weight: 700;

}

#app .muted {

  color: var(--ec-texto-secundario);

}


/* =====================================================
   7. TARJETAS
   ===================================================== */

#app .card {

  background-color: var(--ec-blanco);

  background-image: none;

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

  border-radius: var(--ec-radio);

  box-shadow: var(--ec-sombra);

}


/* =====================================================
   8. FORMULARIOS
   ===================================================== */

#app input:not([type="checkbox"]):not([type="radio"]),
#app select,
#app textarea {

  background-color: #ffffff;

  color: var(--ec-texto);

  border: 1px solid #cbd5e1;

  border-radius: 9px;

  font-family: inherit;

}

#app input:focus-visible,
#app select:focus-visible,
#app textarea:focus-visible {

  outline: 2px solid var(--ec-azul);

  outline-offset: 1px;

}


/* =====================================================
   9. BOTON COPIAR
   AZUL FUERTE
   ===================================================== */

body #app button.ec-visual-copiar,
body #app button.encicar-boton-copiar {

  background: var(--ec-azul) !important;

  color: #ffffff !important;

  border: 1px solid var(--ec-azul-hover) !important;

  border-radius: 9px !important;

  font-weight: 700 !important;

  font-size: 14px !important;

  min-height: 44px;

  opacity: 1 !important;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.2s ease;

}


/* EFECTO AL PASAR EL CURSOR */

body #app button.ec-visual-copiar:hover:not(:disabled),
body #app button.encicar-boton-copiar:hover:not(:disabled) {

  background: var(--ec-azul-hover) !important;

}


/* =====================================================
   10. BOTON REPORTAR
   VERDE FUERTE
   ===================================================== */

body #app button.ec-visual-reportar,
body #app button.encicar-boton-reportar {

  background: var(--ec-verde) !important;

  color: #ffffff !important;

  border: 1px solid var(--ec-verde-hover) !important;

  border-radius: 9px !important;

  font-weight: 700 !important;

  font-size: 14px !important;

  min-height: 44px;

  opacity: 1 !important;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.2s ease;

}


/* EFECTO AL PASAR EL CURSOR */

body #app button.ec-visual-reportar:hover:not(:disabled),
body #app button.encicar-boton-reportar:hover:not(:disabled) {

  background: var(--ec-verde-hover) !important;

}


/* =====================================================
   11. BOTONES DESHABILITADOS
   ===================================================== */

body #app button.ec-visual-copiar:disabled,
body #app button.encicar-boton-copiar:disabled,
body #app button.ec-visual-reportar:disabled,
body #app button.encicar-boton-reportar:disabled {

  background: #64748b !important;

  color: #ffffff !important;

  border-color: #475569 !important;

  opacity: 1 !important;

  cursor: not-allowed !important;

}


/* =====================================================
   12. EFECTOS DE LOS BOTONES
   ===================================================== */

body #app button.ec-visual-copiar:active:not(:disabled),
body #app button.encicar-boton-copiar:active:not(:disabled),
body #app button.ec-visual-reportar:active:not(:disabled),
body #app button.encicar-boton-reportar:active:not(:disabled) {

  transform: scale(0.98);

}


/* ACCESIBILIDAD */

body #app button.ec-visual-copiar:focus-visible,
body #app button.encicar-boton-copiar:focus-visible,
body #app button.ec-visual-reportar:focus-visible,
body #app button.encicar-boton-reportar:focus-visible {

  outline: 3px solid #fbbf24 !important;

  outline-offset: 2px;

}


/* =====================================================
   13. TABLAS
   ===================================================== */

#app .tablewrap {

  overflow-x: auto;

}

#app table {

  border-collapse: collapse;

}

#app table th {

  color: #334155;

  font-weight: 700;

}

#app table td {

  color: #334155;

}

#app table tbody tr:hover {

  background-color:
    rgba(37, 99, 235, 0.035);

}


/* =====================================================
   14. MENU LATERAL
   ===================================================== */

#app nav button {

  border-radius: 9px;

  transition:
    background 0.2s ease,
    color 0.2s ease;

}


/* =====================================================
   15. DISEÑO RESPONSIVE
   CELULARES Y TABLETAS
   ===================================================== */

@media (max-width: 650px) {

  /* Logo de encabezado */

  #app > header > div:first-child {

    background-size: 36px 36px;

    padding-left: 47px;

    min-height: 40px;

  }

  /* Logo del login */

  #login h2::before {

    width: 80px;

    height: 80px;

  }

  /* Titulos */

  #app .modulo h2 {

    font-size: 23px;

  }

  /* Tarjetas */

  #app .card {

    border-radius: 10px;

  }

  /* Botones */

  body #app button.ec-visual-copiar,
  body #app button.encicar-boton-copiar,
  body #app button.ec-visual-reportar,
  body #app button.encicar-boton-reportar {

    min-height: 46px;

    font-size: 14px !important;

  }

}


/* =====================================================
   16. ACCESIBILIDAD
   REDUCCION DE ANIMACIONES
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

  body #app button.ec-visual-copiar,
  body #app button.encicar-boton-copiar,
  body #app button.ec-visual-reportar,
  body #app button.encicar-boton-reportar {

    transition: none;

  }

}


/* =====================================================
   FIN
   ENCICAR CONTROL - APARIENCIA VISUAL V2.0
   ===================================================== */

/* =====================================================
   ENCICAR CONTROL
   DISEÑO MODERNO DE INICIO DE SESION
   VERSION 3.0

   - Logo corporativo centrado
   - Formulario moderno
   - Boton de ingreso destacado
   - Fondo limpio sin marca de agua
   - Adaptado a celulares
   - Sin modificar funciones
   ===================================================== */


/* ==========================================
   1. FONDO GENERAL
   ========================================== */

body {
  background-color: #eef2f7;
  background-image: none;
}


/* ==========================================
   2. TARJETA DE INICIO DE SESION
   ========================================== */

#login.card.login {

  position: relative;

  width: min(92%, 500px);

  max-width: 500px;

  box-sizing: border-box;

  margin: clamp(24px, 6vh, 55px) auto 24px;

  padding: 34px 32px 32px;

  background: #ffffff;

  border: 1px solid #dbe3ef;

  border-radius: 18px;

  box-shadow:
    0 12px 38px rgba(15, 23, 42, 0.08);

  overflow: hidden;

}


/* LINEA CORPORATIVA SUPERIOR */

#login::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 5px;

  background: linear-gradient(
    90deg,
    #1d4ed8,
    #2563eb,
    #60a5fa
  );

}


/* ==========================================
   3. LOGO CORPORATIVO
   ========================================== */

#login h2::before {

  content: "";

  display: block;

  width: 96px;
  height: 96px;

  margin: 0 auto 16px;

  background-image:
    url("../assets/logo-encicar.png");

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

}


/* ==========================================
   4. TITULO PRINCIPAL
   ========================================== */

#login h2 {

  margin: 0 0 9px;

  color: #10213c;

  font-family:
    "Segoe UI",
    Arial,
    sans-serif;

  font-size: 27px;

  font-weight: 800;

  line-height: 1.25;

  letter-spacing: -0.5px;

  text-align: center;

}


/* ==========================================
   5. SUBTITULO
   ========================================== */

#login > p.muted {

  color: #64748b;

  font-size: 14px;

  text-align: center;

  line-height: 1.5;

  margin: 0 0 30px;

}


/* ==========================================
   6. ETIQUETAS DE LOS CAMPOS
   ========================================== */

#login label {

  display: block;

  color: #10213c;

  font-size: 14px;

  font-weight: 650;

  margin: 17px 0 8px;

}


/* ==========================================
   7. CAMPOS DE INGRESO
   ========================================== */

#login input {

  display: block;

  width: 100%;

  box-sizing: border-box;

  min-height: 50px;

  padding: 12px 14px;

  background-color: #f8fafc;

  color: #10213c;

  border: 1px solid #cbd5e1;

  border-radius: 10px;

  font-size: 15px;

  font-family: inherit;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;

}


/* EFECTO AL SELECCIONAR UN CAMPO */

#login input:focus {

  outline: none;

  background-color: #ffffff;

  border-color: #2563eb;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.13);

}


/* TEXTO DE EJEMPLO */

#login input::placeholder {

  color: #94a3b8;

}


/* ==========================================
   8. BOTON INGRESAR
   ========================================== */

#login #btnLogin {

  display: block;

  width: 100%;

  min-height: 52px;

  margin-top: 26px;

  padding: 12px 18px;

  background: #2563eb;

  color: #ffffff;

  border: 1px solid #1d4ed8;

  border-radius: 10px;

  font-family: inherit;

  font-size: 15px;

  font-weight: 750;

  letter-spacing: 0.3px;

  text-align: center;

  cursor: pointer;

  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;

}


/* HOVER */

#login #btnLogin:hover:not(:disabled) {

  background: #1d4ed8;

  box-shadow:
    0 5px 14px rgba(37, 99, 235, 0.22);

}


/* CLIC */

#login #btnLogin:active:not(:disabled) {

  background: #1e40af;

}


/* ACCESIBILIDAD */

#login #btnLogin:focus-visible {

  outline: 3px solid #fbbf24;

  outline-offset: 3px;

}


/* BOTON DESHABILITADO */

#login #btnLogin:disabled {

  background: #94a3b8;

  border-color: #94a3b8;

  color: #ffffff;

  cursor: not-allowed;

  box-shadow: none;

}


/* ==========================================
   9. MENSAJES DE ERROR
   ========================================== */

#login #loginError:not(:empty) {

  padding: 11px 13px;

  margin-top: 15px;

  color: #b91c1c;

  background: #fef2f2;

  border: 1px solid #fecaca;

  border-radius: 9px;

  font-size: 13px;

  line-height: 1.5;

}


/* ==========================================
   10. ADAPTACION A CELULARES
   ========================================== */

@media (max-width: 650px) {

  #login.card.login {

    width: calc(100% - 28px);

    margin: 24px auto;

    padding: 28px 20px 26px;

    border-radius: 15px;

  }

  #login h2::before {

    width: 80px;
    height: 80px;

    margin-bottom: 14px;

  }

  #login h2 {

    font-size: 23px;

  }

  #login > p.muted {

    font-size: 13px;

    margin-bottom: 23px;

  }

  #login input {

    min-height: 48px;

    font-size: 16px;

  }

  #login #btnLogin {

    min-height: 50px;

    font-size: 15px;

  }

}


/* ==========================================
   11. REDUCIR ANIMACIONES SI EL
   DISPOSITIVO ASI LO SOLICITA
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  #login input,
  #login #btnLogin {

    transition: none;

  }

}


/* =====================================================
   FIN - INICIO DE SESION ENCICAR V3.0
   ===================================================== */

/* =====================================================
   ENCICAR CONTROL
   ENCABEZADO Y MENU CORPORATIVO
   VERSION 4.0

   Solo apariencia.
   No altera funciones ni permisos.
   ===================================================== */


/* ==========================================
   1. ENCABEZADO PRINCIPAL
   ========================================== */

#app > header {
  background: #10213c;
  color: #ffffff;

  border-bottom: 3px solid #2563eb;

  padding: 15px 22px;

  box-sizing: border-box;

  box-shadow:
    0 3px 12px rgba(15, 23, 42, 0.12);
}


/* ==========================================
   2. LOGO Y NOMBRE DE LA EMPRESA
   ========================================== */

#app > header > div:first-child {
  background-image:
    url("../assets/logo-encicar.png");

  background-repeat: no-repeat;
  background-position: left center;
  background-size: 48px 48px;

  padding-left: 62px;
  min-height: 50px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

#app > header strong {
  color: #ffffff;

  font-size: 19px;
  font-weight: 800;

  letter-spacing: 0.3px;
}

#app #usuarioActual {
  color: #cbd5e1;
}


/* ==========================================
   3. BOTON SALIR
   ========================================== */

#app > header button {
  background: transparent !important;

  color: #ffffff !important;

  border: 1px solid #64748b !important;

  border-radius: 9px;

  padding: 9px 16px;

  font-weight: 600;

  cursor: pointer;
}

#app > header button:hover {
  background: #1e3a5f !important;

  border-color: #93c5fd !important;
}


/* ==========================================
   4. MENU LATERAL
   ========================================== */

#app nav {
  background-color: #172e50;

  color: #ffffff;

  box-sizing: border-box;
}


/* ==========================================
   5. BOTONES DEL MENU
   ========================================== */

#app nav button {
  border-radius: 9px;

  color: #e2e8f0;

  font-weight: 500;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

#app nav button:hover:not(:disabled) {
  background-color: #25466f;

  color: #ffffff;
}

#app nav button:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}


/* ==========================================
   6. SEPARADORES DEL MENU
   ========================================== */

#app nav .encicar-separador {
  color: #a9c4e8;

  border-bottom-color:
    rgba(203, 213, 225, 0.25);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1px;
}


/* ==========================================
   7. CONTENIDO PRINCIPAL
   ========================================== */

#app main {
  background-color: #eef2f7 !important;

  background-image: none !important;

  color: #10213c;
}


/* ==========================================
   8. TITULOS DE LOS MODULOS
   ========================================== */

#app .modulo > h2 {
  color: #10213c;

  font-weight: 800;
  letter-spacing: -0.4px;
}


/* ==========================================
   9. ADAPTACION A CELULARES
   ========================================== */

@media (max-width: 650px) {

  #app > header {
    padding: 12px 14px;
  }

  #app > header > div:first-child {
    background-size: 36px 36px;

    padding-left: 46px;

    min-height: 40px;
  }

  #app > header strong {
    font-size: 15px;
  }

  #app > header button {
    padding: 8px 11px;

    font-size: 12px;
  }

  #app nav button {
    font-size: 13px;
  }

}


/* ==========================================
   10. REDUCIR ANIMACIONES
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  #app nav button {
    transition: none;
  }

}

/* FIN - ENCABEZADO Y MENU V4.0 */

/* =====================================================
   ENCICAR CONTROL
   DASHBOARD CORPORATIVO - VERSION 5.0

   Solo apariencia visual.
   Conserva datos, graficos y funciones.
   ===================================================== */


/* ======================================
   1. ENCABEZADO DEL DASHBOARD
   ====================================== */

#inicio > h2 {
  color: #10213c;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}

#inicio #bienvenida {
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 22px;
}


/* ======================================
   2. DISTRIBUCION DE INDICADORES
   ====================================== */

#inicio #dashboardAdmin {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 16px;
  margin-bottom: 24px;
}

/* Respetar los permisos del sistema */

#inicio #dashboardAdmin.hidden {
  display: none !important;
}


/* ======================================
   3. TARJETAS DE INDICADORES
   ====================================== */

#inicio #dashboardAdmin > .card {
  position: relative;

  min-width: 0;
  min-height: 115px;

  box-sizing: border-box;

  padding: 20px;

  background: #ffffff;

  color: #64748b;

  font-size: 13px;
  font-weight: 600;

  border: 1px solid #dbe3ef;
  border-top: 4px solid #2563eb;

  border-radius: 13px;

  box-shadow:
    0 3px 12px rgba(15, 23, 42, 0.045);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


/* Efecto suave al pasar el cursor */

#inicio #dashboardAdmin > .card:hover {
  transform: translateY(-2px);

  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.09);
}


/* ======================================
   4. VALORES NUMERICOS
   ====================================== */

#inicio #dashboardAdmin .value {
  color: #10213c;

  font-size: clamp(27px, 3vw, 37px);
  font-weight: 800;

  line-height: 1.2;

  letter-spacing: -0.7px;

  margin-top: 15px;

  font-variant-numeric: tabular-nums;

  overflow-wrap: anywhere;
}


/* ======================================
   5. COLORES DE LOS SEIS INDICADORES
   ====================================== */

/* Cuadrillas */

#inicio #dashboardAdmin > .card:nth-child(1) {
  border-top-color: #2563eb;
}

/* Tecnicos presentes */

#inicio #dashboardAdmin > .card:nth-child(2) {
  border-top-color: #0891b2;
}

/* Programadas */

#inicio #dashboardAdmin > .card:nth-child(3) {
  border-top-color: #d97706;
}

/* Realizadas */

#inicio #dashboardAdmin > .card:nth-child(4) {
  border-top-color: #16a34a;
}

/* Reprogramadas */

#inicio #dashboardAdmin > .card:nth-child(5) {
  border-top-color: #9333ea;
}

/* Pendientes */

#inicio #dashboardAdmin > .card:nth-child(6) {
  border-top-color: #dc2626;
}


/* ======================================
   6. BLOQUES DE ESTADISTICAS
   ====================================== */

/* Mejorar tarjetas del inicio sin cambiar
   su contenido ni estructura interna. */

#inicio > .card {
  border: 1px solid #dbe3ef;
  border-radius: 13px;

  background: #ffffff;

  box-shadow:
    0 3px 12px rgba(15, 23, 42, 0.045);
}


/* ======================================
   7. GRAFICAS Y CONTENIDO ANCHO
   ====================================== */

#inicio canvas,
#inicio svg {
  max-width: 100%;
}

#inicio .tablewrap {
  max-width: 100%;
  overflow-x: auto;
}


/* ======================================
   8. PANEL DEL TECNICO
   ====================================== */

#inicio #dashboardTecnico {
  background: #ffffff;

  border: 1px solid #dbe3ef;
  border-left: 4px solid #2563eb;

  border-radius: 13px;

  padding: 22px;
}

#inicio #dashboardTecnico.hidden {
  display: none !important;
}

#inicio #dashboardTecnico h3 {
  color: #10213c;
  font-weight: 750;
}


/* ======================================
   9. ADAPTACION PARA TABLETAS
   ====================================== */

@media (max-width: 1000px) {

  #inicio #dashboardAdmin {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* ======================================
   10. ADAPTACION PARA CELULARES
   ====================================== */

@media (max-width: 600px) {

  #inicio > h2 {
    font-size: 23px;
  }

  #inicio #bienvenida {
    font-size: 13px;
  }

  #inicio #dashboardAdmin {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 10px;
  }

  #inicio #dashboardAdmin > .card {
    padding: 14px 12px;

    min-height: 95px;

    font-size: 12px;

    border-radius: 11px;
  }

  #inicio #dashboardAdmin .value {
    font-size: 27px;
    margin-top: 12px;
  }

  #inicio #dashboardTecnico {
    padding: 16px;
  }

}


/* ======================================
   11. PANTALLAS MUY PEQUENAS
   ====================================== */

@media (max-width: 360px) {

  #inicio #dashboardAdmin {
    grid-template-columns: minmax(0, 1fr);
  }

}


/* ======================================
   12. ACCESIBILIDAD
   ====================================== */

@media (prefers-reduced-motion: reduce) {

  #inicio #dashboardAdmin > .card {
    transition: none;
  }

  #inicio #dashboardAdmin > .card:hover {
    transform: none;
  }

}

/* FIN - DASHBOARD ENCICAR V5.0 */

/* ============================================
   ENCICAR CONTROL
   ESTANDARIZAR BOTON DESPLEGABLE
   SOLICITUDES DE ADICIONALES
   ============================================ */

#encicarAdicionales
#ecSolAdmin
.ecsol-flecha-fija {

  width: 39px !important;
  height: 39px !important;

  min-width: 39px !important;
  min-height: 39px !important;

  max-width: 39px !important;
  max-height: 39px !important;

  flex: 0 0 39px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 0 0 auto !important;

  background: #eef2f7 !important;
  color: #23405f !important;

  border: none !important;
  border-radius: 9px !important;

  font-size: 19px !important;
  line-height: 1 !important;

  box-sizing: border-box !important;
}