/* ============================================================================
   La ficha del proyecto dentro de la tarea (ver sj-proyecto.js).

   Se apoya en las variables de la propia aplicacion y en las de la paleta de
   ODJIT que ya define smartin-jobs.css, con valor de respaldo por si alguna no
   estuviera: asi esto alcanza a los dos temas sin escribir dos hojas.
   El papel se separa por el filo, no por la sombra.
   ========================================================================== */

.sj-proy {
  /* La columna de detalle de la aplicacion centra e impone ancho a sus hijos:
     sin esto, los campos salian a 245 px en un panel de 790 (visto en pantalla
     el 2026-11-01). Se fuerza aqui, no se pelea con su hoja. */
  align-items: stretch;
  text-align: left;
  width: 100%;
  margin: 0 0 1.5rem;
  padding: 0.9rem 1rem 1rem;
  background: var(--card-background, var(--sj-papel, #fff));
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.sj-proy__cab {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.sj-proy__tit {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.05rem;
  color: var(--text, var(--sj-tinta, #0b1930));
}

.sj-proy__av {
  font-family: Georgia, serif;
  font-size: 0.85rem;
  color: var(--grey-500, #6e8299);
  font-variant-numeric: tabular-nums;
}

.sj-proy__chip {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  padding: 0.18rem 0.42rem;
  border-radius: 3px;
  white-space: nowrap;
}
.sj-proy__chip--ok,
.sj-proy__chip--validada { background: #e3f1ee; color: var(--sj-verde, #0e7a64); }
.sj-proy__chip--falta    { background: #f8e8e9; color: var(--sj-rojo, #c0444a); }
.sj-proy__chip--borrador { background: #f8efdc; color: var(--sj-ambar, #9a6b12); }

.sj-proy__aviso {
  margin: 0;
  padding: 0.55rem 0.7rem;
  background: #f8efdc;
  border: 1px solid var(--sj-ambar, #9a6b12);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--text, #0b1930);
}
.sj-proy__aviso button {
  margin-left: 0.4rem;
  font: inherit;
  font-size: 0.82rem;
  background: none;
  border: 1px solid var(--sj-ambar, #9a6b12);
  color: var(--sj-ambar, #9a6b12);
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
  cursor: pointer;
}

.sj-proy__campo { display: flex; flex-direction: column; gap: 0.25rem;
                  align-items: stretch; width: 100%; }

.sj-proy__campo > label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--grey-500, #6e8299);
}
.sj-proy__campo > label small {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--grey-400, #8496a8);
}

.sj-proy textarea,
.sj-proy input[type="text"],
.sj-proy select {
  font: inherit;
  font-size: 0.93rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  color: var(--text, #0b1930);
  background: var(--site-background, #fff);
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 3px;
  resize: vertical;
}
.sj-proy textarea:focus,
.sj-proy input[type="text"]:focus,
.sj-proy select:focus {
  outline: 2px solid var(--sj-azul, #087aa8);
  outline-offset: 1px;
  border-color: var(--sj-azul, #087aa8);
}

.sj-proy__zh { display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; }
.sj-proy__zh textarea {
  flex: 1;
  font-size: 0.88rem;
  color: #c00000;          /* el mismo rojo que la linea en chino de la lamina */
  min-height: 2.6rem;
}

.sj-proy__cuenta {
  font-size: 0.72rem;
  color: var(--grey-400, #8496a8);
  font-variant-numeric: tabular-nums;
}
.sj-proy__cuenta--mal { color: var(--sj-rojo, #c0444a); font-weight: 600; }

.sj-proy__fila {
  width: 100%;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .sj-proy__fila { grid-template-columns: 1.3fr 1fr 1fr; }
}
.sj-proy__fila label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--grey-500, #6e8299);
}

.sj-proy__pie {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.sj-proy__guardar {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  border: 1px solid var(--sj-azul, #087aa8);
  background: var(--sj-azul, #087aa8);
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
}
.sj-proy__guardar:hover {
  background: var(--sj-azul-alto, #066288);
  border-color: var(--sj-azul-alto, #066288);
}

.sj-proy__estado { font-size: 0.84rem; color: var(--grey-500, #6e8299); }
.sj-proy__estado--ok    { color: var(--sj-verde, #0e7a64); }
.sj-proy__estado--aviso { color: var(--sj-ambar, #9a6b12); }
.sj-proy__estado--mal   { color: var(--sj-rojo, #c0444a); }

/* El chino, recogido por defecto -------------------------------------------
   Solo hace falta para la lamina del CEO, asi que no ocupa sitio en la pantalla
   de todos los dias. Se despliega desde la linea del pie. */
.sj-proy--zh-off .sj-proy__zh { display: none; }

.sj-proy__zhver {
  margin-left: auto;
  font: inherit;
  font-size: 0.76rem;
  color: var(--grey-500, #6e8299);
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--grey-400, #8496a8);
  padding: 0 0 1px;
  cursor: pointer;
}
.sj-proy__zhver:hover { color: var(--sj-azul, #087aa8); border-bottom-color: currentColor; }
.sj-proy__zhver:focus-visible { outline: 2px solid var(--sj-azul, #087aa8); outline-offset: 2px; }