/* ============================================================
   SiTi · Ajustes propios
   Se carga DESPUÉS de app.min.css. Aquí va únicamente lo que
   SiTi necesita y la hoja heredada no cubre, para no tocar
   nunca el archivo compartido con Vinculación.
   ============================================================ */

/* --- Menú lateral -------------------------------------------------
   La hoja heredada colorea cada pestaña con las variables --c/--c2/--c3
   que app.js define por posición. Antes se anulaban con !important porque
   nadie las alimentaba; ahora sí, así que solo se ajusta el tamaño y se
   deja pasar el color. */
#side #nav nav{display:flex; flex-direction:column; gap:5px}
#side #nav nav button{
  width:100%; text-align:left; min-height:40px;
  padding:9px 12px; border-radius:11px;
  font-size:13.5px; font-weight:560; letter-spacing:-.01em;
  display:flex; align-items:center; gap:9px;
}
#side #nav nav button svg{width:17px; height:17px; flex:none}

/* --- Pestañas internas de un panel ---------------------------------
   Antes se distinguían reutilizando el botón normal y su variante
   ghost, y con tantos botones alrededor no quedaba claro cuál estaba
   abierta. Ahora la activa lleva su propio estilo, no la ausencia de
   otro. */
.subtab{
  border:1px solid rgba(30,58,98,.14);
  background:rgba(255,255,255,.72);
  color:#33506f;
  border-radius:10px; padding:7px 14px;
  font-family:inherit; font-size:13px; font-weight:580; letter-spacing:-.01em;
  cursor:pointer; transition:.15s;
}
.subtab:hover{background:rgba(53,175,228,.14); border-color:rgba(53,175,228,.34)}
.subtab.on{
  background:linear-gradient(135deg,#3FB6E8,#1E8FC6);
  border-color:transparent; color:#fff;
  box-shadow:0 5px 14px rgba(30,143,198,.30);
}
.subtab.on:hover{background:linear-gradient(135deg,#3FB6E8,#1E8FC6)}

/* --- Tablas de datos --------------------------------------------- */
.tabla{width:100%; border-collapse:collapse; font-size:13px}
.tabla th{
  text-align:left; font-size:11px; font-weight:640; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-soft);
  padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tabla td{padding:9px 10px; border-bottom:.5px solid var(--line); vertical-align:top}
.tabla tr:last-child td{border-bottom:none}
.tabla tbody tr:hover{background:rgba(53,175,228,.07)}
.tabla td.num{text-align:right; font-variant-numeric:tabular-nums}

/* Tabla de muchas columnas: los encabezados pueden partirse en dos líneas
   y el relleno se ajusta, para que entre completa sin barra lateral.
   Una barra horizontal obliga a mover la vista para leer una sola fila,
   que es justo lo que hay que evitar en una tabla de control. */
.tabla.compacta th,
.tabla.compacta td{padding:7px 7px; font-size:12.5px}
.tabla.compacta th{white-space:normal; line-height:1.25}
.tabla.compacta td.num{padding-left:4px; padding-right:4px}
/* Las acciones se reparten en varias líneas cuando no caben. Con
   nowrap, una fila con cuatro botones empujaba los primeros fuera del
   área visible de la tarjeta y parecía que la opción no existía. */
/* Las acciones van en una sola línea, alineadas a la derecha, y la
   columna se queda solo con el ancho que necesita. Repartirlas en varias
   líneas producía un escalonado desordenado y filas de triple altura;
   si la tabla no cabe, se desliza por dentro de su tarjeta. */
.tabla td.acc{
  text-align:right; white-space:nowrap; width:1%;
}
.tabla td.acc > *{vertical-align:middle}
.tabla td.acc .btn{
  padding:4px 10px; font-size:11.5px; line-height:1.3;
  min-height:0; border-radius:7px; margin-left:4px;
}
.tabla td.acc .btn:first-child{margin-left:0}

/* --- Etiquetas de estado ----------------------------------------- */
.chip{
  display:inline-block; padding:2.5px 9px; border-radius:99px;
  font-size:11.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
}
.chip.ok{background:var(--ok-bg); color:var(--ok)}
.chip.run{background:var(--run-bg); color:var(--run)}
.chip.wait{background:var(--wait-bg); color:var(--wait)}
.chip.stop{background:var(--stop-bg); color:var(--stop)}

/* --- Rejilla de formularios --------------------------------------- */
.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0 16px}
.rejilla .ancho{grid-column:1/-1}

/* --- Barra de acciones sobre una tarjeta -------------------------- */
.barra{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.barra .crece{flex:1 1 auto}

/* --- Informe de validación de la carga de malla ------------------- */
.informe{max-height:340px; overflow:auto; margin-top:12px}
.informe .fila{
  display:flex; gap:10px; align-items:baseline;
  padding:7px 10px; border-bottom:.5px solid var(--line); font-size:12.5px;
}
.informe .fila b{flex:none; min-width:64px; color:var(--ink-soft); font-weight:600}
.informe .fila.mal{background:var(--stop-bg)}
.informe .fila.mal b{color:var(--stop)}

/* --- Resumen numérico --------------------------------------------- */
.cifras{display:flex; gap:22px; flex-wrap:wrap; margin:2px 0 4px}
.cifras div{min-width:88px}
.cifras b{display:block; font-size:23px; font-weight:660; letter-spacing:-.03em}
.cifras span{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em}

/* --- Zona de carga de archivo -------------------------------------
   Va con selectores propios y !important porque la hoja heredada
   estiliza los <label> del formulario y desalineaba este bloque. */
#main label.soltar{
  display:block !important;
  width:100%; margin:16px 0 0 !important; padding:26px 20px !important;
  border:1.5px dashed rgba(28,21,72,.24); border-radius:var(--r-md);
  background:rgba(28,21,72,.02);
  text-align:center !important; cursor:pointer; transition:.15s;
  box-sizing:border-box;
}
#main label.soltar:hover{
  border-color:var(--cyan); background:rgba(53,175,228,.07);
}
#main label.soltar b{
  display:block; margin:0 0 4px;
  font-size:14px; font-weight:640; letter-spacing:-.015em; color:var(--ink);
  text-transform:none;
}
#main label.soltar span{
  display:block; margin:0;
  font-size:12.5px; font-weight:400; letter-spacing:0; color:var(--ink-soft);
  text-transform:none;
}
#main label.soltar input{display:none}

/* --- Áreas de texto largas ---------------------------------------- */
textarea{min-height:64px; line-height:1.5; resize:vertical; font-family:var(--ui)}
.tabla textarea{min-height:44px}

/* --- Vista previa del documento -----------------------------------
   La hoja heredada ya trae .doc con el membrete de fondo y las reglas
   de impresión. Aquí solo se añaden las tablas del PEA. */
.doc table{width:100%; border-collapse:collapse; margin:6px 0 14px}
.doc th,.doc td{border:.5px solid #666; padding:4px 6px; vertical-align:top; font-size:11px}
.doc th{background:#eef3fa; font-weight:640; text-align:left}
.doc td.c{text-align:center}
.doc td.eje{background:#dff3e4}
.doc h4{margin:14px 0 4px; font-size:13px}
.doc h5{margin:16px 0 4px; font-size:12px; text-transform:none; letter-spacing:0; color:var(--ink)}
.doc p{margin:0 0 8px; text-align:justify}
.doc ol,.doc ul{margin:0 0 10px; padding-left:20px}
.doc li{margin-bottom:3px; text-align:justify}
.doc .titulo{text-align:center; font-weight:700; margin:0 0 2px; font-size:13px}
.doc .firmas{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-top:36px;
  text-align:center; font-size:11px}
.doc .firmas div{border-top:.5px solid #333; padding-top:5px}

/* ============================================================
   HOJAS DEL DOCUMENTO
   La vista previa se reparte en hojas A4 separadas, como en un
   procesador de texto: fondo gris entre páginas en pantalla y
   un salto real de página al imprimir.
   ============================================================ */

#veil .sheet .doc{                       /* contenedor de medición */
  background:#fff !important; background-image:none !important;
  width:210mm; max-width:100%; margin:0 auto;
  padding:0 25mm !important; border:none; border-radius:0;
  font-size:11.5px; line-height:1.55; box-sizing:border-box;
}

.hojas{display:flex; flex-direction:column; align-items:center; gap:9mm}
.pagina{
  width:210mm; height:297mm;
  padding:25mm 25mm 22mm 25mm;
  background:#fff; color:var(--ink);
  box-shadow:0 3px 14px rgba(12,26,54,.22);
  box-sizing:border-box; overflow:hidden; position:relative;
  font-size:11.5px; line-height:1.55;
}
.pagina .cuerpo{height:100%; overflow:hidden}
.pagina .pie{
  position:absolute; left:25mm; right:25mm; bottom:10mm;
  text-align:center; font-size:9px; color:rgba(28,21,72,.45);
  border-top:.5px solid rgba(28,21,72,.12); padding-top:3mm;
}

/* Las tablas y títulos dentro de la hoja usan el mismo estilo del
   documento, así que se reaprovechan las reglas de .doc. */
.pagina table{width:100%; border-collapse:collapse; margin:6px 0 14px}
/* En un documento oficial el contenido de las tablas va centrado en la
   altura de su celda: el texto largo se justifica, pero queda alineado
   con los números y los rótulos de su misma fila. */
.pagina th,.pagina td{
  border:.5px solid #666; padding:4px 6px;
  vertical-align:middle; font-size:11px;
}
.pagina th{
  background:#eef3fa; font-weight:640;
  text-align:center; vertical-align:middle;
}
.pagina td.c{text-align:center}
.pagina h4{text-align:left; margin:12px 0 6px; font-size:13px}
.pagina h4:first-child{margin-top:0}
.pagina h5{margin:14px 0 4px; font-size:12px; text-transform:none; letter-spacing:0; color:var(--ink)}
.pagina p{margin:0 0 8px; text-align:justify}
.pagina ol,.pagina ul{margin:0 0 10px; padding-left:20px}
.pagina li{margin-bottom:3px; text-align:justify}
.pagina .titulo{text-align:center; font-weight:700; margin:0 0 2px; font-size:13px}
/* --- Cuadro de firmas (sección X) --------------------------------- */
.pagina table.firmas{
  table-layout:fixed; width:100%; border-collapse:collapse;
  margin:6px 0 0; font-size:10px;
}
.pagina table.firmas th, .pagina table.firmas td{
  border:.5px solid #666; padding:5px 6px; text-align:center; vertical-align:middle;
}
.pagina table.firmas th{background:#eef3fa; text-align:left; font-weight:700; font-size:10.5px}
.pagina table.firmas tr.espacio td{height:22mm}   /* espacio para firmar */
.pagina table.firmas .cargo{font-weight:700}

/* ============================================================
   HOJA MEMBRETADA POR CARRERA
   El membrete va como fondo de cada hoja A4, no como imagen fija
   detrás de la página: así se repite en todas las hojas del PEA
   y sale igual en pantalla y en papel. Cuando la carrera no tiene
   membrete propio —Seguridad Ciudadana y Penitenciaria por
   ahora— no se pinta nada y la hoja queda en blanco.
   ============================================================ */

.pagina[data-membrete]{
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  /* El margen sube y se ensancha por la derecha para no invadir el
     encabezado de la carrera ni la franja vertical del lema. */
  padding:34mm 30mm 20mm 25mm;
}

/* Los navegadores omiten los fondos al imprimir salvo que se les
   pida lo contrario. Sin esto, el PEA sale en papel sin membrete. */
.pagina[data-membrete]{
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

.pagina[data-membrete="administracion"]{background-image:url(membretes/administracion.png)}
.pagina[data-membrete="contabilidad"]{background-image:url(membretes/contabilidad.png)}
.pagina[data-membrete="desarrollo-software"]{background-image:url(membretes/desarrollo-software.png)}
.pagina[data-membrete="ensamblaje"]{background-image:url(membretes/ensamblaje.png)}
.pagina[data-membrete="monitoreo-ambiental"]{background-image:url(membretes/monitoreo-ambiental.png)}
.pagina[data-membrete="planificacion-transporte"]{background-image:url(membretes/planificacion-transporte.png)}
.pagina[data-membrete="procesamiento-alimentos"]{background-image:url(membretes/procesamiento-alimentos.png)}
.pagina[data-membrete="seguridad-riesgos"]{background-image:url(membretes/seguridad-riesgos.png)}

/* El pie del documento sube y pierde su filete: la franja de redes
   sociales del membrete ya cierra la hoja, y una raya encima de ella
   solo agregaba ruido. Queda la numeración, que un documento oficial
   necesita para poder citarse por página. */
.pagina[data-membrete] .pie{
  bottom:19mm; left:30mm; right:30mm;
  border-top:none; padding-top:0;
}

@media print{
  @page{size:A4; margin:0}
  #hoja{display:none !important}
  .pagina[data-membrete]{
    padding:34mm 30mm 20mm 25mm;
    background-size:100% 100%;
  }
  .hojas{display:block; gap:0}
  .pagina{
    box-shadow:none; margin:0;
    width:210mm; height:296mm;
    /* El relleno se repite aquí: al fijar el alto, esta regla pisa la de
       pantalla y sin él el contenido queda pegado al borde del papel. */
    padding:25mm 25mm 22mm 25mm;
    page-break-after:always; break-after:page;
  }
  .pagina:last-child{page-break-after:auto; break-after:auto}
}

/* ============================================================
   FORMATO DE ARTÍCULO PARA LA GUÍA PRÁCTICA
   Tipografía serif, encabezado a todo el ancho y cuerpo a dos
   columnas, como un paper. Solo se aplica a la Guía: el PEA
   conserva una sola columna porque sus tablas son anchas.
   ============================================================ */

.pagina.paper{
  font-family:"Latin Modern Roman","Nimbus Roman","Liberation Serif",
              Georgia,"Times New Roman",serif;
  font-size:9.6pt; line-height:1.42; color:#111;
  padding:22mm 18mm 18mm 18mm;
}
.pagina.paper .cuerpo.dos-columnas{
  column-count:2; column-gap:7mm; column-fill:auto;
}

/* Bloques que cruzan las dos columnas: título, autoría y los
   encabezados de cada práctica. */
.pagina.paper .span{
  column-span:all; -webkit-column-span:all;
  margin:0 0 6px;
}

.pagina.paper p{margin:0 0 6px; text-align:justify; hyphens:auto}
.pagina.paper p + p{text-indent:4mm}          /* sangría de continuación */
.pagina.paper ul,.pagina.paper ol{margin:0 0 7px; padding-left:5mm}
.pagina.paper li{margin-bottom:2px; text-align:justify; hyphens:auto}

.pagina.paper .titulo-paper{
  font-size:15pt; font-weight:700; line-height:1.22;
  text-align:center; margin:0 0 8px;
}
.pagina.paper .autoria{
  text-align:center; font-size:9.2pt; margin:0 0 3px;
}
.pagina.paper .filiacion{
  text-align:center; font-size:8.2pt; font-style:italic;
  color:#333; margin:0 0 12px;
}
.pagina.paper .resumen{
  margin:0 0 14px; padding:0 12mm;
  font-size:9pt; text-align:justify;
}
.pagina.paper .resumen b{display:block; margin-bottom:3px; font-size:9.4pt}

.pagina.paper h4{
  font-size:11pt; font-weight:700; text-align:left;
  margin:12px 0 5px; break-after:avoid;
}
.pagina.paper h5{
  font-size:9.8pt; font-weight:700; text-transform:none; letter-spacing:0;
  color:#111; margin:9px 0 3px; break-after:avoid;
}
.pagina.paper table{
  width:100%; border-collapse:collapse; margin:5px 0 9px; font-size:8.6pt;
}
.pagina.paper th,.pagina.paper td{
  border:none; border-top:.5px solid #999; border-bottom:.5px solid #999;
  padding:3px 4px; text-align:left; vertical-align:top;
}
.pagina.paper th{background:none; font-weight:700; font-size:8.6pt}
.pagina.paper .pie{
  font-family:"Liberation Serif",Georgia,"Times New Roman",serif;
  font-size:8.5pt; border-top:.5px solid #bbb; left:18mm; right:18mm;
}

/* Enlaces que deben verse como botones (descarga de plantillas). */
a.btn{display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; line-height:1}

/* ============================================================
   CORRECCIÓN DE IMPRESIÓN
   La hoja heredada imprime la ventana modal con posición
   absoluta y alto fijo, de modo que el navegador solo ve lo que
   entra en una pantalla y manda una sola página. Aquí se libera
   el flujo para que salgan todas las hojas.
   ============================================================ */
@media print{
  html, body{
    height:auto !important; overflow:visible !important;
    /* Sin esto, el margen que el navegador da al cuerpo desplaza la
       primera hoja y sale una página en blanco al inicio. */
    margin:0 !important; padding:0 !important;
    background:#fff !important;
  }
  #wall, #side, #main, #mobileTop, #mobileScrim{display:none !important}

  #veil, #veil.on{
    position:static !important; inset:auto !important;
    display:block !important; place-items:initial !important;
    height:auto !important; max-height:none !important;
    overflow:visible !important;
    padding:0 !important; margin:0 !important;
    background:#fff !important; backdrop-filter:none !important;
  }
  #veil .sheet, #veil .sheet.wide, #veil .sheet.ancha{
    position:static !important;
    width:auto !important; max-width:none !important;
    height:auto !important; max-height:none !important;
    overflow:visible !important;
    margin:0 !important; padding:0 !important;
    background:#fff !important; box-shadow:none !important; border:none !important;
  }
  #veil .sheet > h3, #veil .sheet > .cap, #veil .act, #veil .xclose{display:none !important}

  .hojas{display:block !important; gap:0 !important; align-items:stretch !important}
  .pagina{
    display:block !important;
    width:210mm !important;
    /* El relleno se repite aquí porque, sin él, el contenido queda
       pegado al borde del papel: la regla de impresión pisa la de
       pantalla al fijar el alto. */
    padding:25mm 25mm 22mm 25mm !important;
    /* Un pelo por debajo del alto real de la hoja: si mide exactamente
       297 mm, el redondeo del navegador derrama un píxel a la página
       siguiente y aparece una hoja vacía entre cada una. */
    height:296mm !important;
    margin:0 !important; box-shadow:none !important; border:none !important;
    overflow:hidden !important;
    break-inside:avoid;
    page-break-after:always; break-after:page;
  }
  .pagina:first-child{page-break-before:avoid; break-before:avoid}
  .pagina:last-child{page-break-after:auto; break-after:auto}
  .hojas > *:first-child{margin-top:0 !important}
  .pagina .cuerpo{height:100% !important}
}

/* ============================================================
   GUÍA PRÁCTICA · FORMATO DE DOCUMENTO
   A una columna, con portada propia y jerarquía de títulos como
   la guía institucional impresa. La tipografía serif se conserva.
   ============================================================ */

.pagina.guia{
  font-family:"Times New Roman","Liberation Serif","Nimbus Roman",Times,serif;
  font-size:11pt; line-height:1.5; color:#111;
  padding:25mm 24mm 20mm 26mm;
}
.pagina.guia .cuerpo, .pagina.guia p, .pagina.guia li,
.pagina.guia h4, .pagina.guia h5, .pagina.guia h6{
  font-family:inherit;
}
.pagina.guia .cuerpo{column-count:1}

.pagina.guia p{margin:0 0 7px; text-align:justify; hyphens:auto}
.pagina.guia ul{margin:0 0 10px; padding-left:7mm}
.pagina.guia li{margin-bottom:5px; text-align:justify; hyphens:auto}

.pagina.guia h4{                       /* secciones mayores */
  font-size:14pt; font-weight:700; text-align:left;
  margin:0 0 10px; padding-bottom:3px;
  border-bottom:1px solid #999; break-after:avoid;
}
.pagina.guia h4.centrado{text-align:center; border-bottom:none; margin-bottom:14px}
.pagina.guia h5{                       /* las diez secciones de la práctica */
  font-size:11.5pt; font-weight:700; text-transform:none; letter-spacing:0;
  color:#111; margin:13px 0 4px; break-after:avoid;
}
.pagina.guia h6{                       /* 4.1, 7.2 … */
  font-size:11pt; font-weight:700; font-style:italic;
  margin:9px 0 3px; break-after:avoid;
}
/* Sub-items numerados. Van como bloque para que el paginador los
   mueva enteros: el número nunca queda separado de su texto. */
.pagina.guia .sub{margin:0 0 7px; break-inside:avoid}
.pagina.guia .sub p{margin:0 0 4px}
.pagina.guia .sub p b:first-child{margin-right:3px}
.pagina.guia .sub h6{margin:0 0 3px}
.pagina.guia .sub + .sub{margin-top:0}

.pagina.guia .ficha{
  margin:0 0 8px; padding:7px 10px; text-align:left;
  background:#f4f7fb; border-left:2px solid #8aa3c4;
}
.pagina.guia .firma{margin-top:14px; text-align:left}

/* --- Portada --- */
.pagina.guia .portada{
  height:100%; display:flex; flex-direction:column;
  align-items:center; text-align:center;
  padding-top:14mm;
}
.pagina.guia .portada p{text-align:center; margin:0; hyphens:none}
.pagina.guia .portada .ins{
  font-size:15pt; font-weight:700; letter-spacing:.06em; line-height:1.45;
  text-transform:uppercase;
  padding-bottom:5mm; margin-bottom:18mm;
  border-bottom:1.2px solid #333; width:78%;
}
.pagina.guia .portada .rot{
  font-size:10.5pt; font-style:italic; color:#555;
  letter-spacing:.02em; margin-bottom:2mm;
}
.pagina.guia .portada .dato{
  font-size:12pt; line-height:1.7; margin-bottom:14mm;
}
.pagina.guia .portada .tit{
  font-size:21pt; font-weight:700; line-height:1.32;
  margin:2mm 0 16mm; padding:6mm 6mm;
  border-top:.8px solid #999; border-bottom:.8px solid #999;
  width:88%;
}
.pagina.guia .portada .pie-portada{
  margin-top:auto; font-size:11.5pt; line-height:1.6;
  padding-top:6mm; border-top:.8px solid #999; width:56%;
}

/* Las celdas del PEA se alinean por medición en hoja.js: una línea va
   centrada y varias justificadas. Aquí solo se prepara el terreno. */
.pagina td{text-align:left; hyphens:auto}
.pagina td.c, .pagina td.num{text-align:center !important}

/* Rótulos del detalle de horas y de tutorías: angostos y sin partir,
   para que los cuatro pares entren en una sola línea. */
.pagina td.rot{
  font-weight:600; white-space:nowrap;
  width:1%; padding-left:5px; padding-right:5px;
}

/* --- Tabla del sistema de evaluación (sección V) ------------------
   Reproduce el formato institucional. Los anchos van en porcentaje para
   guardar la proporción del modelo impreso, y todo el contenido queda
   centrado en los dos ejes, como en el documento original. */
.pagina table.eval{
  table-layout:fixed; width:100%;
  font-size:8.5px; margin:6px 0 14px;
}
.pagina table.eval td, .pagina table.eval th{
  padding:2px 4px; line-height:1.2;
  text-align:center; vertical-align:middle;
  word-break:normal; overflow-wrap:break-word; hyphens:none;
}
.pagina table.eval th{
  background:#eef3fa; font-weight:700; font-size:8.5px;
}
.pagina table.eval td.ev-nom{text-align:center; padding-left:6px; padding-right:6px}

/* Tipo de evaluación y criterios. El texto girado va dentro de un bloque
   propio: si se gira la celda entera, el centrado deja de funcionar
   porque los ejes de la tabla y del texto dejan de coincidir. Con el
   bloque adentro, la celda lo centra en horizontal y en vertical con las
   reglas normales de tabla. */
.pagina table.eval td.vert, .pagina table.eval th.vert{
  text-align:center; vertical-align:middle; padding:5px 1px;
}
.pagina table.eval .giro{
  display:block; margin:0 auto;          /* centrado horizontal seguro */
  width:max-content; max-height:100%;
  writing-mode:vertical-rl; transform:rotate(180deg);
  text-align:center; white-space:normal;
  font-weight:600; font-size:8.5px; line-height:1.25;
}

/* Fila de cierre: el rótulo cruza las columnas de la izquierda y va
   centrado, como en el formato impreso. */
.pagina table.eval tr:last-child th{
  background:none; text-align:center; font-size:9px;
}

/* Un título y su tabla no se separan: viajan juntos a la hoja siguiente. */
.junto{break-inside:avoid}

/* --- Encabezados de tabla dentro del documento ---------------------
   La hoja heredada pone todas las «th» en mayúsculas y con espaciado de
   letras, porque allá son encabezados de listados de la interfaz. En un
   documento oficial los títulos van escritos tal como se redactaron. */
.pagina th{
  text-transform:none !important;
  letter-spacing:0 !important;
  color:inherit !important;
}

/* Blindaje del documento: dentro de una hoja, las clases utilitarias de
   la hoja heredada no deben alterar la maquetación de las tablas. */
.pagina table td.act, .pagina table th.act{
  display:table-cell !important; margin:0 !important;
  padding:3px 4px !important; border-top:none !important;
  justify-content:initial !important; gap:0 !important;
}

/* --- Tabla del sistema de evaluación (sección V) ------------------
   Reproduce el formato institucional. Los anchos van en porcentaje para
   guardar la proporción del modelo impreso, y todo el contenido queda
   centrado en los dos ejes, como en el documento original. */
.pagina table.eval{
  table-layout:fixed; width:100%;
  font-size:8.5px; margin:6px 0 14px;
}
.pagina table.eval td, .pagina table.eval th{
  padding:2px 4px; line-height:1.2;
  text-align:center; vertical-align:middle;
  word-break:normal; overflow-wrap:break-word; hyphens:none;
}
.pagina table.eval th{
  background:#eef3fa; font-weight:700; font-size:8.5px;
}
.pagina table.eval td.ev-nom{text-align:center; padding-left:6px; padding-right:6px}

/* Tipo de evaluación y criterios. El texto girado va dentro de un bloque
   propio: si se gira la celda entera, el centrado deja de funcionar
   porque los ejes de la tabla y del texto dejan de coincidir. Con el
   bloque adentro, la celda lo centra en horizontal y en vertical con las
   reglas normales de tabla. */
.pagina table.eval td.vert, .pagina table.eval th.vert{
  text-align:center; vertical-align:middle; padding:5px 1px;
}
.pagina table.eval .giro{
  display:block; margin:0 auto;          /* centrado horizontal seguro */
  width:max-content; max-height:100%;
  writing-mode:vertical-rl; transform:rotate(180deg);
  text-align:center; white-space:normal;
  font-weight:600; font-size:8.5px; line-height:1.25;
}

/* Fila de cierre: el rótulo cruza las columnas de la izquierda y va
   centrado, como en el formato impreso. */
.pagina table.eval tr:last-child th{
  background:none; text-align:center; font-size:9px;
}

/* Un título y su tabla no se separan: viajan juntos a la hoja siguiente. */
.junto{break-inside:avoid}

/* --- Encabezados de tabla dentro del documento ---------------------
   La hoja heredada pone todas las «th» en mayúsculas y con espaciado de
   letras, porque allá son encabezados de listados de la interfaz. En un
   documento oficial los títulos van escritos tal como se redactaron. */
.pagina th{
  text-transform:none !important;
  letter-spacing:0 !important;
  color:inherit !important;
}

/* Blindaje del documento: dentro de una hoja, las clases utilitarias de
   la hoja heredada no deben alterar la maquetación de las tablas. */
.pagina table td.act, .pagina table th.act{
  display:table-cell !important; margin:0 !important;
  padding:3px 4px !important; border-top:none !important;
  justify-content:initial !important; gap:0 !important;
}

/* --- Tabla de contenidos de enseñanza (sección VI) ----------------
   Veinticuatro columnas iguales: las filas de la unidad, las de
   contenidos y la de interrelación agrupan de maneras distintas y así
   ninguna deforma a las otras. */
.pagina table.cont{
  table-layout:fixed; width:100%;
  font-size:8.5px; margin:5px 0 4px;
}
.pagina table.cont td, .pagina table.cont th{
  padding:2.5px 4px; line-height:1.28; vertical-align:middle;
  text-align:left; word-break:normal; overflow-wrap:break-word;
}
.pagina table.cont th{
  background:#eef3fa; text-align:center; font-weight:700; font-size:8.5px;
}
.pagina table.cont td.c{text-align:center}

/* Un color por eje transversal. El contenido enlazado se pinta con el
   color de su eje, y el mismo color va en el rótulo de la fila de
   interrelación, de modo que la correspondencia se lea sin explicación. */
.pagina table.cont tr.eje-amb > td{background:#d6ecc0}   /* medio ambiente */
.pagina table.cont tr.eje-tic > td{background:#cfe0f5}   /* TICS */
.pagina table.cont tr.eje-val > td{background:#fae4b8}   /* formación en valores */
.pagina table.cont tr.eje-inv > td{background:#e2d3f0}   /* investigación */
.pagina table.cont td.eje-amb{background:#d6ecc0}
.pagina table.cont td.eje-tic{background:#cfe0f5}
.pagina table.cont td.eje-val{background:#fae4b8}
.pagina table.cont td.eje-inv{background:#e2d3f0}

/* Significado de las siglas, al pie de cada unidad. */
.pagina .leyenda{
  margin:0 0 16px; font-size:7.8px; line-height:1.35;
  color:#444; text-align:left;
}

/* Blindaje del documento: dentro de una hoja, las clases utilitarias de
   la hoja heredada no deben alterar la maquetación de las tablas. */
.pagina table td.act, .pagina table th.act{
  display:table-cell !important; margin:0 !important;
  padding:3px 4px !important; border-top:none !important;
  justify-content:initial !important; gap:0 !important;
}

/* --- Tabla de contenidos de enseñanza (sección VI) ----------------
   Doce columnas: permiten que las filas de datos de la unidad, las de
   contenidos y la de interrelación agrupen de maneras distintas sin
   deformar la tabla. */
.pagina table.cont{
  table-layout:fixed; width:100%;
  font-size:8.5px; margin:5px 0 16px;
}
.pagina table.cont td, .pagina table.cont th{
  padding:2.5px 4px; line-height:1.25; vertical-align:middle;
  text-align:left; word-break:normal; overflow-wrap:break-word;
}
.pagina table.cont th{
  background:#eef3fa; text-align:center; font-weight:700; font-size:8px;
  line-height:1.15;
}
.pagina table.cont td.c{text-align:center}
/* Contenido interrelacionado con un eje transversal. */
.pagina table.cont tr.eje > td{background:#cfe6a4}

/* Fila de interrelación: rótulos anchos y códigos angostos, con letra
   algo menor, para que la fila no crezca en alto. */
.pagina table.cont tr.inter td{padding:2px 3px; line-height:1.2}
.pagina table.cont td.rotulo{font-size:8px; font-weight:600}

/* Las dos tablas de una unidad se leen como una sola: se pegan sin
   separación y comparten el borde intermedio. */
.pagina table.cont.datos-unidad{margin-bottom:0}
.pagina table.cont.contenidos-unidad{margin-top:-0.5px}

/* Encabezado corrido, de la segunda hoja en adelante. Va sobre el
   relleno superior de la hoja, sin restarle espacio al contenido. */
.pagina .encabezado{
  position:absolute; left:25mm; right:25mm; top:13mm;
  font-size:8.5px; color:#555; text-align:center;
  padding-bottom:2mm; border-bottom:.5px solid #bbb;
}
.pagina.guia .encabezado{left:26mm; right:24mm; font-size:9pt; color:#333}

/* --- Cuadre de horas, al cierre de la sección VI ------------------ */
.pagina table.cuadre{
  table-layout:fixed; width:100%; font-size:9px; margin:5px 0 4px;
}
.pagina table.cuadre td, .pagina table.cuadre th{
  padding:3px 5px; text-align:center; vertical-align:middle;
}
/* En el resumen de ejes va todo centrado y en redonda: la negrita se
   reserva para los encabezados de la tabla. */
.pagina table.cuadre tr.cierre td{background:#f4f7fb}
.pagina table.cuadre tr.cierre td:first-child{font-weight:700}

/* Semáforo del cuadre. */
.pagina .semaforo{font-weight:700}
.pagina .semaforo.ok{background:#d6ecc0; color:#2c5c1f}
.pagina .semaforo.aviso{background:#fae4b8; color:#7a5410}
.pagina .semaforo.mal{background:#f4c4c4; color:#8a2020}

/* Justificación de la interrelación, al pie de cada unidad. */
.pagina table.cont tr.justi td{font-size:8.2px; padding:2px 4px}


/* ============================================================
   FONDO INSTITUCIONAL · GRANATE
   Solo cambia el telón. Los colores funcionales no se tocan:
   el rojo de --stop debe seguir queriendo decir «algo va mal»,
   y perdería ese significado si todo el sistema fuera rojo.
   ============================================================ */
body{background:#C4405A}

#wall{
  background:
    radial-gradient(120% 90% at 12% 8%,   #FF8A5C 0, transparent 56%),
    radial-gradient(110% 80% at 88% 12%,  #FF6F9C 0, transparent 52%),
    radial-gradient(120% 110% at 70% 100%, #E8523F 0, transparent 60%),
    linear-gradient(160deg, #E05A55 0, #A93258 100%);
}
#wall b:nth-child(1){background:radial-gradient(circle,#FFA574 0,transparent 70%)}
#wall b:nth-child(2){background:radial-gradient(circle,#FF8FB2 0,transparent 70%)}
#wall b:nth-child(3){background:radial-gradient(circle,#FFC79A 0,transparent 70%)}

/* El aviso de error del ingreso reserva su espacio siempre. Vacío se ve
   como una franja rosa suelta encima del botón, que sobre el granate
   parece un elemento roto. Se colapsa mientras no tenga qué decir. */
#lcard .err:empty{
  display:none!important; margin:0!important; padding:0!important;
  border:none!important; min-height:0!important;
}

/* Enlace de clave olvidada: un botón, para que responda al teclado y al
   lector de pantalla, con apariencia de enlace. */
#lcard .olvide{
  display:block; width:100%; margin-top:12px; padding:8px;
  background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:560;
  color:var(--run); border-radius:var(--r-sm); transition:.15s;
}
#lcard .olvide:hover{background:var(--run-bg)}

/* La palabra SiCCa del ingreso llevaba un degradado azul heredado.
   Se recalienta hacia el rosa y el durazno para que asiente sobre
   el granate en lugar de flotar encima. */
.sivi-word{
  background:linear-gradient(135deg,#fff 5%,#FFF0E4 34%,#FFD6C4 66%,#FFF6F0 100%);
  -webkit-background-clip:text; background-clip:text;
}
/* Sobre un fondo más claro, el texto blanco necesita más sombra para
   seguir despegándose del coral. */
.sivi-name{text-shadow:0 3px 16px rgba(96,20,32,.46)}
.sivi-tagline{text-shadow:0 2px 10px rgba(96,20,32,.38)}

/* Marca de agua de la esquina.
   El contenedor lleva opacity:.16 heredado, y eso multiplica cualquier
   color del texto: subir solo el blanco de las letras no cambia nada.
   Hay que levantar la opacidad del bloque. */
.sivi-login-corner{opacity:.72!important}
.sivi-app-corner{opacity:.66!important}
.sivi-login-corner-word,.sivi-app-corner-word{
  color:#FFFFFF;
  text-shadow:0 2px 16px rgba(140,30,45,.30);
}
.sivi-login-corner-sub,.sivi-app-corner-sub{
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 12px rgba(140,30,45,.26);
}
@media (max-width:760px){
  .sivi-login-corner{opacity:.62!important}
  .sivi-app-corner{opacity:.55!important}
}

/* ============================================================
   CONTENCIÓN HORIZONTAL
   Una celda de rejilla toma por ancho mínimo el de su contenido,
   así que una tabla ancha empuja el área de trabajo fuera de la
   pantalla y asoman los filos del fondo por la derecha. Con
   min-width:0 el área respeta su columna, y cada tarjeta se
   desliza por dentro en lugar de arrastrar la página entera.
   ============================================================ */
#main{min-width:0; max-width:100%; overflow-x:hidden}
#main .glass.card{
  max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
/* La barra de filtros nunca desborda: sus controles se reparten. */
#main .barra{flex-wrap:wrap; max-width:100%}
#main .barra select{min-width:0}

/* La cabecera de sección tampoco. */
.head{max-width:100%; flex-wrap:wrap}

/* ============================================================
   TELÉFONO
   La hoja heredada resuelve el armazón; aquí se ordena lo que
   SiCCa agregó después y que en pantalla estrecha se desbordaba:
   tablas anchas, rejillas de formulario y barras de filtros.
   ============================================================ */
@media (max-width:760px){

  /* Las tablas no se comprimen: se deslizan dentro de su tarjeta.
     Apretar diez columnas en 380 px las vuelve ilegibles. */
  .tabla{min-width:560px}
  .tabla th,.tabla td{padding:8px 8px; font-size:12.5px}
  /* En el teléfono no hay ancho para cuatro botones seguidos: ahí sí
     se reparten, en bloque alineado a la derecha. */
  .tabla td.acc{white-space:normal; width:auto}
  .tabla td.acc .btn{margin:0 0 3px 4px}

  /* Un campo por línea: dos columnas en un teléfono no caben. */
  .rejilla{grid-template-columns:1fr!important}
  .rejilla .ancho{grid-column:auto!important}

  /* Las barras de filtros y acciones se apilan y ocupan el ancho. */
  .barra{flex-wrap:wrap; gap:7px}
  .barra .crece{flex-basis:100%}
  .barra select,.barra input{max-width:none!important; width:100%}
  .barra .btn{flex:1 1 auto}

  /* Cifras del inicio de dos en dos, no de una en una. */
  .grid.kpis{grid-template-columns:1fr 1fr!important; gap:9px}
  .glass.card.kpi b{font-size:22px}

  /* Los dos bloques del inicio, uno debajo del otro. */
  .dashboard-focus{grid-template-columns:1fr!important}
  .dashboard-alert{flex-wrap:wrap; gap:7px}
  .dashboard-alert .btn{width:100%}
  .role-dashboard-actions{flex-direction:column}
  .role-dashboard-actions .btn{width:100%}

  /* La cadena de seis pasos se lee en vertical. */
  .chain{flex-direction:column; align-items:stretch; gap:7px}
  .chain .step{width:100%; justify-content:flex-start}

  /* Cabeceras de sección: el título encima, las acciones debajo. */
  .head{flex-direction:column; align-items:stretch; gap:10px}
  .head h2{font-size:21px}
  .head select,.head .btn{width:100%}

  /* La lámina de trabajo ocupa la pantalla completa. */
  #hoja{width:100vw!important; max-width:100vw!important; border-radius:0!important}
  #hoja .act{flex-wrap:wrap; gap:7px}
  #hoja .act .btn{flex:1 1 46%}

  /* Casillas y campos con área de toque suficiente. */
  input,select,textarea{font-size:16px}      /* evita el zoom de iOS */
  input[type=checkbox]{width:19px; height:19px}
}

/* Pantallas muy estrechas: una sola cifra por fila. */
@media (max-width:400px){
  .grid.kpis{grid-template-columns:1fr!important}
  #hoja .act .btn{flex:1 1 100%}
}

/* ============================================================
   IDENTIDAD DE SiTi
   Todo lo anterior es la hoja compartida con SiVi y SiCCa, y se
   deja intacta a propósito: botones, paneles, tablas y menú lateral
   tienen que sentirse iguales. Lo único que cambia aquí es el color
   de marca, que es el verde de la pantalla de ingreso ya definida
   por Vicerrectorado. Quien pasa de un sistema al otro reconoce la
   casa; el color le dice en qué habitación está.
   ============================================================ */

body{background:#3EBBAC}

#wall{
  background:
    radial-gradient(85% 65% at 14% 6%, rgba(160,240,214,.92) 0, transparent 62%),
    radial-gradient(70% 68% at 92% 14%, rgba(99,210,188,.80) 0, transparent 58%),
    radial-gradient(95% 75% at 66% 100%, rgba(46,163,166,.72) 0, transparent 62%),
    linear-gradient(145deg,#63D2BC 0,#2FA79B 46%,#1E7F86 100%);
}

/* Palabra de marca en el ingreso: mismo peso y recorte que en SiCCa,
   con el degradado desplazado al verde institucional. */
.sivi-word{
  background:linear-gradient(135deg,#ffffff 5%,#DCFBEF 38%,#A9EBDC 68%,#F2FFFA 100%);
  -webkit-background-clip:text; background-clip:text;
}

/* Cabecera de sección sobre el fondo verde. */
.head h2{text-shadow:0 3px 16px rgba(6,52,46,.28)}

/* Aviso flotante de operación correcta, en el verde de la casa. */
.chip.ok{background:rgba(21,156,132,.14); color:#0E6153}

/* Cadena de etapas del proceso de titulación en el panel de inicio. */
.chain .step.done i{
  background:linear-gradient(180deg,#35C2A0,#159C84);
  box-shadow:0 3px 10px rgba(21,156,132,.38);
}
.chain .step.done::before{background:linear-gradient(90deg,#63D2BC,#159C84)}

/* Ficha de proceso: bloque de datos que se repite en anteproyecto,
   proyecto y seguimiento. */
.ficha{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px; margin:10px 0;
}
.ficha div{
  padding:9px 11px; border-radius:12px;
  background:rgba(21,156,132,.06); border:1px solid rgba(21,156,132,.12);
}
.ficha small{
  display:block; margin-bottom:3px; font-size:9.8px; font-weight:670;
  letter-spacing:.045em; text-transform:uppercase; color:var(--ink-soft);
}
.ficha b{display:block; font-size:12.5px; font-weight:650; line-height:1.3}

/* Etapa del proceso, para distinguirla de un estado documental. */
.etapa{
  display:inline-block; padding:3px 10px; border-radius:99px;
  font-size:11.5px; font-weight:650; letter-spacing:-.01em;
  background:rgba(30,127,134,.12); color:#12666B;
}


/* ============================================================
   FASE 3E2C3B · FICHA DE ESTUDIANTE / PADRÓN INSTITUCIONAL
   ============================================================ */
.siti-form-section{
  margin:0 0 16px;
  padding:16px;
  border:1px solid rgba(38,76,128,.12);
  border-radius:16px;
  background:rgba(247,250,255,.72);
}
.siti-section-title{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:14px;
}
.siti-section-title>div:first-child{
  display:grid;
  place-items:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:10px;
  background:rgba(53,175,228,.14);
  color:#1677b4;
  font-weight:800;
}
.siti-section-title b{display:block;font-size:14px;color:#233b59}
.siti-section-title small{display:block;margin-top:2px;line-height:1.35;color:#65758a}
.siti-search-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.siti-search-row .btn{white-space:nowrap;min-height:38px}
.siti-student-empty,
.siti-student-not-found,
.siti-historical-callout,
.siti-historical-warning{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 16px;
  padding:15px 16px;
  border:1px dashed rgba(38,76,128,.18);
  border-radius:16px;
  background:rgba(247,250,255,.68);
}
.siti-student-empty{
  justify-content:flex-start;
}
.siti-student-empty-icon{
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:13px;
  background:rgba(53,175,228,.13);
  color:#1677b4;
  font-size:24px;
}
.siti-student-empty b,
.siti-historical-callout b,
.siti-historical-warning b{display:block;color:#233b59}
.siti-student-empty small,
.siti-historical-callout small,
.siti-historical-warning span{
  display:block;
  margin-top:3px;
  color:#697a8d;
  line-height:1.4;
}
.siti-student-not-found{
  align-items:flex-start;
  background:rgba(255,196,107,.10);
  border-style:solid;
  border-color:rgba(154,107,16,.20);
}
.siti-student-not-found h3{margin:7px 0 4px;font-size:17px}
.siti-student-not-found p{margin:0;color:#65758a;font-size:13px}
.siti-historical-callout{border-style:solid}
.siti-historical-warning{
  display:block;
  background:rgba(255,196,107,.12);
  border-style:solid;
  border-color:rgba(154,107,16,.20);
}
.siti-student-card{
  margin:0 0 16px;
  overflow:hidden;
  border:1px solid rgba(38,76,128,.14);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 24px rgba(18,56,103,.07);
}
.siti-student-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px 14px;
  border-bottom:1px solid rgba(38,76,128,.09);
  background:linear-gradient(180deg,rgba(244,249,255,.95),rgba(255,255,255,.9));
}
.siti-eyebrow{
  display:block;
  margin-bottom:4px;
  color:#64809f;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}
.siti-student-card-head h3{
  margin:0;
  color:#1f3652;
  font-size:18px;
  line-height:1.25;
}
.siti-student-data-grid{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:0;
}
.siti-data-item{
  min-width:0;
  padding:13px 18px;
  border-bottom:1px solid rgba(38,76,128,.07);
}
.siti-data-item:nth-child(odd){
  border-right:1px solid rgba(38,76,128,.07);
}
.siti-data-item span{
  display:block;
  margin-bottom:4px;
  color:#718196;
  font-size:10.5px;
  font-weight:760;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.siti-data-item strong{
  display:block;
  overflow-wrap:anywhere;
  color:#263d58;
  font-size:13.5px;
  font-weight:690;
  line-height:1.35;
}
.siti-titulacion-box{
  background:rgba(241,247,255,.80);
}
@media(max-width:760px){
  .siti-search-row{grid-template-columns:1fr}
  .siti-search-row .btn{width:100%}
  .siti-student-card-head,
  .siti-historical-callout{flex-direction:column}
  .siti-historical-callout .btn{width:100%}
  .siti-student-data-grid{grid-template-columns:1fr}
  .siti-data-item:nth-child(odd){border-right:none}
}



/* ============================================================
   FASE 3E2D3 · FICHA DOCENTE INSTITUCIONAL
   ============================================================ */
.siti-teacher-card{
  margin:14px 0 0;
  overflow:hidden;
  border:1px solid rgba(38,76,128,.14);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 24px rgba(18,56,103,.08);
}
.siti-teacher-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px 14px;
  border-bottom:1px solid rgba(38,76,128,.09);
  background:linear-gradient(180deg,rgba(244,249,255,.96),rgba(255,255,255,.92));
}
.siti-teacher-eyebrow{
  display:block;
  margin-bottom:5px;
  color:#69809b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}
.siti-teacher-head h3{
  margin:0;
  color:#233752;
  font-size:18px;
  line-height:1.28;
}
.siti-teacher-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.siti-teacher-field{
  min-width:0;
  padding:13px 18px 14px;
  border-bottom:1px solid rgba(38,76,128,.07);
}
.siti-teacher-field:nth-child(odd){
  border-right:1px solid rgba(38,76,128,.07);
}
.siti-teacher-field span{
  display:block;
  margin:0 0 5px;
  color:#708096;
  font-size:10.5px;
  font-weight:760;
  line-height:1.2;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.siti-teacher-field strong{
  display:block;
  color:#263d58;
  font-size:13.5px;
  font-weight:690;
  line-height:1.4;
  overflow-wrap:anywhere;
  word-break:normal;
}
.siti-danger-btn{
  color:#b42318 !important;
  border-color:#f1b4ae !important;
}
@media(max-width:760px){
  .siti-teacher-head{flex-direction:column}
  .siti-teacher-grid{grid-template-columns:1fr}
  .siti-teacher-field:nth-child(odd){border-right:none}
}