/* ==========================================================================
   Seccion Documentos
   La misma forma que "Cotizaciones guardadas" del Catalogo de PC: la lista
   a la izquierda, lo elegido a la derecha. Arriba, un menu por cada tipo
   de documento.
   ========================================================================== */

.doc-shell{display:block}

/* ---- El menu de tipos: recibos, facturas, cartas... ---------------------- */
.doc-tipos{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.doc-tipo{display:flex;align-items:center;gap:7px;padding:10px 13px;border:1px solid var(--border);
  border-radius:11px;background:var(--panel2);color:var(--mut);font-size:12px;font-weight:700;
  cursor:pointer;min-width:0}
.doc-tipo:hover{border-color:var(--cy);color:var(--txt)}
.doc-tipo.is-on{background:var(--cy);border-color:var(--cy);color:#04222a}
/* El numerito de cuantos hay. Sobre el boton activo va en oscuro, porque
   el fondo pasa a ser cian y el gris de siempre no se leeria. */
.doc-tipo .doc-num{display:inline-grid;place-items:center;min-width:20px;height:19px;padding:0 6px;
  border-radius:999px;background:color-mix(in srgb,var(--txt) 14%,transparent);
  color:var(--mut);font-size:10px;font-weight:800}
.doc-tipo.is-on .doc-num{background:rgba(0,0,0,.22);color:#04222a}

/* ---- Lista y vista previa ------------------------------------------------ */
.doc-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px;margin-top:12px}
.doc-lista{min-width:0}
.doc-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;
  border:1px solid var(--border);border-radius:10px;background:var(--panel2);margin-top:7px;
  cursor:pointer;min-width:0}
.doc-item:hover{border-color:var(--cy)}
.doc-item.is-on{border-color:var(--cy);background:color-mix(in srgb,var(--cy) 10%,var(--panel2))}
.doc-item-izq{min-width:0}
.doc-item b{display:block;font-size:12.5px;color:var(--txt)}
.doc-item span{display:block;font-size:10.5px;color:var(--mut);overflow-wrap:anywhere}
.doc-item-der{text-align:right;flex:0 0 auto}
.doc-item-der b{font-size:12.5px;color:var(--ok)}
.doc-item-der span{font-size:10px}

.doc-vista{min-width:0;padding:13px 14px;border:1px solid var(--border);border-radius:12px;
  background:var(--panel);min-height:260px}
.doc-vacio{display:grid;place-items:center;min-height:230px;text-align:center;color:var(--mut);
  font-size:12px;padding:0 14px;line-height:1.5}

/* La ficha del documento elegido: etiqueta a la izquierda, valor a la derecha */
.doc-campo{display:grid;grid-template-columns:minmax(0,110px) minmax(0,1fr);gap:8px;
  padding:7px 0;border-bottom:1px dashed var(--border);font-size:12px}
.doc-campo:last-child{border-bottom:0}
.doc-campo b{color:var(--mut);font-weight:700;font-size:11px}
.doc-campo span{color:var(--txt);overflow-wrap:anywhere}
.doc-items{margin-top:9px;padding-top:9px;border-top:1px solid var(--border)}
.doc-items .hint{margin-bottom:5px}
.doc-linea{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--txt);
  padding:3px 0}
.doc-linea span{color:var(--mut);flex:0 0 auto}

.doc-acciones{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.doc-acciones button{flex:1 1 150px;min-height:42px}
.doc-acciones .doc-enviar{color:var(--cy);border-color:color-mix(in srgb,var(--cy) 45%,var(--border));
  background:color-mix(in srgb,var(--cy) 9%,var(--panel2))}

/* Cuadro de envio: usa los mismos colores y botones del resto del Cotizador. */
.doc-correo-modal{width:min(560px,92vw)}
.doc-correo-ayuda{margin:-4px 0 16px;color:var(--mut);font-size:12px;line-height:1.5}
.doc-correo-modal select,.doc-correo-modal input[type="email"]{width:100%}
.doc-correo-guardar{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px dashed var(--border);
  border-radius:10px;background:var(--panel2);color:var(--txt);font-size:11.5px;line-height:1.45;cursor:pointer}
.doc-correo-guardar input[type="checkbox"]{flex:0 0 18px;width:18px!important;height:18px;margin:1px 0 0;
  min-width:18px;accent-color:var(--cy)}
.doc-correo-previa{margin-top:12px;padding:12px 13px;border:1px solid var(--border);border-radius:11px;
  background:var(--panel2);font-size:11.5px;line-height:1.5;color:var(--mut)}
.doc-correo-previa b,.doc-correo-previa span{display:block;color:var(--txt)}
.doc-correo-previa p{margin:7px 0 0}
.doc-correo-estado{min-height:18px;margin-top:10px;color:var(--mut);font-size:11px}

/* Aviso de los tipos que todavia no tienen plantilla */
.doc-pendiente{margin-top:10px;padding:11px 13px;border:1px dashed var(--border);border-radius:11px;
  color:var(--mut);font-size:11.5px;line-height:1.5}

@media(max-width:900px){
  .doc-layout{grid-template-columns:1fr}
  /* En el celular la lista no puede comerse la pantalla entera. */
  .doc-lista{max-height:340px;overflow-y:auto;overflow-x:hidden}
}
@media(max-width:560px){
  .doc-tipo{flex:1 1 100%;justify-content:space-between}
  .doc-campo{grid-template-columns:1fr;gap:2px}
  .doc-campo b{font-size:10px}
  .doc-acciones{display:grid;grid-template-columns:1fr 1fr}
  .doc-acciones button{width:100%;min-height:44px}
  .doc-acciones #docBajar,.doc-acciones #docBorrar{grid-column:1 / -1}
  .doc-correo-modal{width:calc(100vw - 32px);max-width:calc(100vw - 32px);padding:16px}
  .doc-correo-modal input[type="email"],.doc-correo-modal select{font-size:16px}
  .doc-correo-modal .mbtns{flex-direction:column}
  .doc-correo-modal .mbtns button{min-height:46px}
}