:root{
  --color-primary:#0A84FF;           /* iOS blue */
  --color-primary-dark:#0060DF;
  --color-brand-bg:#F5F5F7;          /* grouped background */
  --color-ok: #34C759;
  --radius-md:0.75rem;
  --shadow-soft:0 6px 18px rgba(0,0,0,.06);
  --transition-fast:.18s cubic-bezier(.4,0,.2,1);
  --font-base:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ------------ RESET ------------*/
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--font-base);
  -webkit-font-smoothing:antialiased;
  background:var(--color-brand-bg);
  color:#1d1d1f;
}

/* ------------ HEADER (10vh fijo) ------------*/

.header-bar {
  display: flex;
  align-items: center;   /* centra verticalmente */
  justify-content: space-between; /* separa logo e info de perfil */
  background: #fff;      /* color de fondo (ajusta al diseño) */
  padding: 0.5rem 1rem;  /* espacio interno */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* ligera sombra */
}

.header-bar a {
  display: flex;
  align-items: center;
  max-width: 5rem;  /* igual que tu inline style */
}

.header-bar img {
  height: 3rem;   /* altura controlada del logo */
  width: auto;
  object-fit: contain;
}

.profile-info {
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;
}

h1 {
  text-align: center;
}

/* ------------ CARD / PANEL ------------*/
.card-rounded{
  background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-soft);
}

/* ------------ INPUTS ------------*/
.input-text{
  width:100%;padding:.6rem .95rem;font-size:1rem;
  background:#fff;border:1px solid #d4d4d7;border-radius:.55rem;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.input-text:focus{
  outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(10,132,255,.25);
}

/* ------------ BUTTONS ------------*/
.btn-primary,.dashboard-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  background:var(--color-primary);color:#fff;text-decoration:none;
  font-weight:600;border:none;border-radius:9999px;
  padding:.7rem 1.6rem;font-size:.95rem;letter-spacing:-.1px;
  transition:background var(--transition-fast),transform var(--transition-fast);
}
.btn-primary:hover,.dashboard-btn:hover{background:var(--color-primary-dark);transform:translateY(-1px)}
.btn-primary:active,.dashboard-btn:active{transform:translateY(0)}

/* ------------ DASHBOARD LAYOUT ------------*/
.dashboard-buttons{height:90vh;display:flex;flex-direction:column;gap:1.5rem;width:100%;}
.dashboard-btn{
  flex:1 1 28%;margin:2rem;border-radius:8rem;padding:2.5rem 0;font-size:1rem;
}
@media(min-width:768px){.dashboard-buttons{max-width:60vw;margin:auto;padding-top:1.5rem;padding-bottom:1.5rem}}




/* ------------ BOTÓN “Añadir fila” ------------ */
.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: .7rem 1.6rem;
  font-size: .95rem;
  font-weight: 600;
  transition: background var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
  margin: 1rem auto 0;    /* centrado horizontal, separado arriba */
}

/* Hover igual que btn-primary */
.add-btn:hover {
  background: var(--color-primary-dark);
}

/* ------------ BOTÓN “Guardar parte” ------------ */
.save-btn {
  position: absolute;
  bottom: 1rem;
  right: 1rem;           /* pegado a la esquina inferior derecha */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ok);
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: .7rem 1.6rem;
  font-size: .95rem;
  font-weight: 600;
  transition: transform var(--transition-fast);
  cursor: pointer;
}


/* ------------ FORMS WIDTH CONTROL ------------*/
main>section.card-rounded{
  max-width:960px;margin:auto;width:100%;margin-top: 2rem;
}

/* ------------ LOGIN ------------*/
.login-body{display:flex;align-items:center;justify-content:center;min-height:100dvh}
.login-wrapper{background:#fff;padding:3rem 3.25rem;border-radius:var(--radius-md);box-shadow:var(--shadow-soft);width:100%;max-width:24rem}
.login-title{color:var(--color-primary);font-weight:800;font-size:1.9rem;margin-bottom:2rem;text-align:center}
.password-field{position:relative}
.password-field button{background:none;border:none;position:absolute;right:.75rem;top:50%;transform:translateY(-50%);cursor:pointer;font-size:1.05rem}
.alert-error{background:#f44336;color:#fff;padding:.75rem 1rem;border-radius:var(--radius-md);font-size:.9rem;margin-bottom:1.25rem}

/* ------------ MODAL PARA TRABAJOS ------------*/
#workModal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);z-index:50}
#workModal .box{background:#fff;border-radius:var(--radius-md);padding:2rem;max-width:640px;width:90%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-soft)}

/* ------------ UTILIDADES ------------*/
.hide-scrollbar::-webkit-scrollbar{display:none}
.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}


/*------------Partes----------------------*/

#workModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(3px);
  z-index: 50;
}
#workModal .box {
  background: #fff;
  border-radius: .75rem;
  padding: 2rem;
  max-width: 640px;
  width: 90%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: var(--shadow-soft);
}
  
  
  
  /* 1. La lista ya no muestra viñetas */
.lista-resumen {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* 2. “Burbuja” de cada trabajo */
.res-item {
  position: relative;                /* contexto para el lápiz */
  padding: 0.5rem 2.25rem 0.5rem 1rem;/* hueco dcha. p/ lápiz   */
  margin-bottom: .5rem;
  background: #f1f5ff;               /* azul muy suave          */
  border-radius: 9999px;             /* pill / burbuja          */
  font-size: .875rem;                /* text-sm                 */
  line-height: 1.2;
  margin:1.5rem;
}

/* 3. Botón-lápiz */
.res-item .edit-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  cursor: pointer;
  user-select: none;
  transform: rotate(135deg);          /* ✏ vertical              */
}

/* Pequeño “hover” opcional */
.res-item .edit-btn:hover {
  opacity: .7;
}

#resumenes {            /* método 1 */
  list-style: none;
  padding-left: 0;
}

/*-----Cerrar------*/
.card-rounded {
  position: relative;
}
#btnCerrar {
  position: absolute;
  top: -1rem;          /* ajusta si quieres moverlo más o menos arriba */
  right: 1rem;         /* ajusta según necesites */
  padding: 0.25em 0.5em;
  font-size: 1.25rem;
  line-height: 1;
  background-color: #f5f5f5;  /* gris muy claro */
  border: none;               /* sin bordes */
}

#btnCerrar:hover {
  cursor: pointer;     /* cursor de mano al pasar por encima */
}